EasyUI DataGrid 多級表頭設定
阿新 • • 發佈:2018-11-13
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!
使用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} ] ]});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
效果如圖:
從以上程式碼和圖中可以看出表頭共有4行9列, 畫單元格就和HTML中一樣,主要利用 rowspan、colspan 屬性
在將要顯示內容的列上新增 field 屬性
作者:itmyhome