EASYUI 报表自定义页脚格式

[pzh313]

现用easyui开发前台报表，采用datagrid展示，问题出在页脚展示格式的问题上，详见下图：

红框属于datagrid的footer部分，且希望做到红框框住的单元格能够合并，网上查了好久，还是没头绪。如果不用footer，直接将页脚数据放入rows里面操作确实可以实现，但我纠结啊，还是希望通过FOOTER来实现统计单元格的合并，请各位指教了！感谢！！！

[LittleMan_LC]

参考链接：http://www.jeasyui.net/tutorial/39.html

[Hello World,]

重写renderFooter，例如：$('#dg').datagrid({view:myview,……});
其中myview定义类似于：

    var myview= $.extend({}, $.fn.datagrid.defaults.view, {
        renderFooter: function (target, container, frozen) {
            var opts = $.data(target, 'datagrid').options;
            var rows = $.data(target, 'datagrid').footer || [];
            var fields = $(target).datagrid('getColumnFields', frozen);
            var table = ['<table class="datagrid-ftable" cellspacing="0" cellpadding="0" border="0"><tbody>'];

            for (var i = 0; i < rows.length; i++) {
                var styleValue = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : '';
                var style = styleValue ? 'style="' + styleValue + '"' : '';
                table.push('<tr class="datagrid-row" datagrid-row-index="' + i + '"' + style + '>');//生成行，可以跨行合并
                table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));//这里生成单元格，可以横向合并
                table.push('</tr>');
            }

            table.push('</tbody></table>');
            $(container).html(table.join(''));
        }
    });

[pzh313]

引用 1 楼 LittleMan_LC 的回复:

参考链接：http://www.jeasyui.net/tutorial/39.html

谢谢！在datagrid数据区确实可以通过mergecell来处理。问题是我的合计在页脚区，都没法取到页脚对应的row.现在在尝试重写rederfooter处理。

[pzh313]

引用 2 楼 apollokk 的回复:

重写renderFooter，例如：$('#dg').datagrid({view:myview,……}); 其中myview定义类似于：

    var myview= $.extend({}, $.fn.datagrid.defaults.view, {
        renderFooter: function (target, container, frozen) {
            var opts = $.data(target, 'datagrid').options;
            var rows = $.data(target, 'datagrid').footer || [];
            var fields = $(target).datagrid('getColumnFields', frozen);
            var table = ['<table class="datagrid-ftable" cellspacing="0" cellpadding="0" border="0"><tbody>'];

            for (var i = 0; i < rows.length; i++) {
                var styleValue = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : '';
                var style = styleValue ? 'style="' + styleValue + '"' : '';
                table.push('<tr class="datagrid-row" datagrid-row-index="' + i + '"' + style + '>');//生成行，可以跨行合并
                table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));//这里生成单元格，可以横向合并
                table.push('</tr>');
            }

            table.push('</tbody></table>');
            $(container).html(table.join(''));
        }
    });

谢谢大虾，我正在尝试这个方式。通过 var str = this.renderRow.call(this, target, fields, frozen, i, rows[i]); 取到行html，然后在我需要的td内加上 rowspan=\"2\" colspan=\"2\"，如果只是单独合并多列或单独合并多行都没问题，可是如果要rowspan=\"2\" colspan=\"2\" 这种模式，还是不成功！！！

[Hello World,]

生成整个footer后再针对footer的table来操作呢