EASYUI 报表自定义页脚格式

pzh313 2018-08-15 09:52:40
现用easyui开发前台报表,采用datagrid展示,问题出在页脚展示格式的问题上,详见下图:

红框属于datagrid的footer部分,且希望做到红框框住的单元格能够合并,网上查了好久,还是没头绪。如果不用footer,直接将页脚数据放入rows里面操作确实可以实现,但我纠结啊,还是希望通过FOOTER来实现统计单元格的合并,请各位指教了!感谢!!!
...全文
211 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
Hello World, 2018-08-17
  • 打赏
  • 举报
回复
生成整个footer后再针对footer的table来操作呢
pzh313 2018-08-16
  • 打赏
  • 举报
回复
引用 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\" 这种模式,还是不成功!!!
pzh313 2018-08-16
  • 打赏
  • 举报
回复
引用 1 楼 LittleMan_LC 的回复:
参考链接:http://www.jeasyui.net/tutorial/39.html
谢谢!在datagrid数据区确实可以通过mergecell来处理。问题是我的合计在页脚区,都没法取到页脚对应的row.现在在尝试重写rederfooter处理。
Hello World, 2018-08-16
  • 打赏
  • 举报
回复
重写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(''));
}
});
LittleMan_LC 2018-08-16
  • 打赏
  • 举报
回复

87,942

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧