1. 程式人生 > >EasyUI DataGrid 多級表頭設定

EasyUI DataGrid 多級表頭設定

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!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中一樣,主要利用 rowspancolspan 屬性

在將要顯示內容的列上新增 field 屬性

作者:itmyhome

           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述