现用easyui开发前台报表,采用datagrid展示,问题出在页脚展示格式的问题上,详见下图:红框属于datagrid的footer部分,且希望做到红框框住的单元格能够合并,网上查了好久,还是没头绪。如果不用footer,直接将页脚数据放入rows里面操作确实可以实现,但我纠结啊,还是希望通过FOOTER来实现统计单元格的合并,请各位指教了!感谢!!!

解决方案 »

  1.   

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

  2.   

    重写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(''));
            }
        });
      

  3.   

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

  4.   

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

  5.   

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