EasyUI DataGrid 多级表头设置

Posted chenyanbin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUI DataGrid 多级表头设置相关的知识,希望对你有一定的参考价值。

使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下:

$(‘#dg‘).datagrid({  
    url:‘datagrid_data.action‘,  
    fit : true,
    fitColumns : false,
    columns:
         [
             [
                {"title":"网格员考核测评表","colspan":9}
             ],
             [
                {"field":"ORGNAME","title":"网格","rowspan":3,width:"80"},
                {"field":"USERZH","title":"网格员","rowspan":3,width:"80"},
                {"title":"工作纪律","rowspan":2},
                {"title":"民主互评","rowspan":2},
                {"title":"志愿者","rowspan":2},
                {"title":"加分项","colspan":2},
                {"title":"总分","rowspan":2},
                {"title":"平均分","rowspan":2}
             ],
             [
                {"title":"信息上报","rowspan":1},
                {"title":"简报采纳","rowspan":1}
             ],
             [
                {"field":"YW1","title":"5分","rowspan":1},
                {"field":"YW2","title":"5分","rowspan":1},
                {"field":"YW3","title":"6分","rowspan":1},
                {"field":"YW4","title":"8分","rowspan":1},
                {"field":"YW5","title":"5分","rowspan":1},
                {"field":"TOTAL","title":"","rowspan":1},
                {"field":"AVG","title":"","rowspan":1}
             ]
         ]
}); 

效果如图:

技术图片

从以上代码和图中可以看出表头共有4行9列, 画单元格就和html中一样,主要利用 rowspan、colspan 属性

在将要显示内容的列上添加 field 属性

以上是关于EasyUI DataGrid 多级表头设置的主要内容,如果未能解决你的问题,请参考以下文章

easyUI——页面多个datagrid导致表头与数据错位

easyui datagrid 怎么动态获取到表头的名称

EasyUI datagrid 列表内如何设定日期选择

修改easyui中datagrid表头和数据不能分开对齐的BUG。

easyUI-datagrid属性设置display:none,表头不显示

easyui导出当前datagrid数据(含表头)