easyui datagrid中 多表頭方法總結

easyui datagrid中怎麼設置表頭成多行顯示呢?其實很簡單,就是給datagrid的columns屬性設置成多個數組就好了.下面直接看例子吧,這是一個兩行表頭的,按照此方法,還能夠設置三行表頭,四行表頭,甚至更多,這就看業務的須要了.

$('#dg').datagrid({
            url: 'datagrid_data.action',
            fit: true,
            fitColumns: false,
            columns:
                 [
                     
                     [
                        { "field": "ORGNAME", "title": "網格", "rowspan": 2, width: "80" },
                        { "field": "USERZH", "title": "網格員", "rowspan": 2, 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 } ] 
                     //此處"信息上報"的行在表頭的第二行
                 ]
        });

上面的代碼顯示效果以下圖:(這樣的顯示效果是正常的)

 

 

若是讓columns這個參數的兩個數組上下換一下位置

$('#dg').datagrid({
            url: 'datagrid_data.action',
            fit: true,
            fitColumns: false,
            columns:
                 [
                     //此處"信息上報"位於表頭的第一行
                     [ { "title": "信息上報", "rowspan": 1 },
                        { "title": "簡報採納", "rowspan": 1 } ],
 [
                        { "field": "ORGNAME", "title": "網格", "rowspan": 2, width: "80" },
                        { "field": "USERZH", "title": "網格員", "rowspan": 2, width: "80" },
                        { "title": "工做紀律", "rowspan": 2 },
                        { "title": "民主互評", "rowspan": 2 },
                        { "title": "志願者", "rowspan": 2 },
                        { "title": "加分項", "colspan": 2 },
                        { "title": "總分", "rowspan": 2 },
                        { "title": "平均分", "rowspan": 2 }
                     ]
                     
                 ]
        });

顯示效果是這樣的:(顯示異常) 若是你們在作datagrid多表頭的狀況出現異常的狀況,不放試一下讓第一行和第二行的數組對調