EasyUI DataGrid 多级表头设置
2016-02-28 20:59
549 查看
使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下:
效果如图:
从以上代码和图中可以看出表头共有4行9列, 画单元格就和HTML中一样,主要利用 rowspan、colspan 属性
在将要显示内容的列上添加 field 属性
作者:itmyhome
$('#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 属性
作者:itmyhome
相关文章推荐
- EasyUI DataGrid 多级表头设置
- Java中String和CharSequence的关系
- 安卓消息机制中的消息队列MessageQueue的插入轮询算法
- npm Guide(二)
- iOS开发UI进阶篇 — 基于手势识别的侧滑展开菜单栏
- LightOJ 1188 Fast Queries(离线树状数组)
- POJ3368/HDU1806/UVa11235 Frequent Values 游程编码+RMQ
- UITextField 限制输入字数
- UIView
- UVA 540 Team Queue(队列)
- iOS省市区三级联动UIPickerView(含省市区id)
- continue break return的区别
- java-tip-关于StringBuilder的使用
- NSValue
- HDU 5538 House Building [Ad Hoc]
- web.xml is missing and <failOnMissingWebXml> is set to true解决方法
- 14.Android UiAutomator 图像处理
- npm Guide(一)
- ActiveMQ消息机制[QUEUE/TOPIC]实例
- leetcode笔记:Range Sum Query 2D - Immutable