EasyUI DateGrid 動態加載列（復雜列）

1、出現情景

　　根據查詢條件，所展示的列的個數不一樣，比如默認是所有的車間，車間下面有工區，所有篩選車間時候，DataGrid中就需要展示該車間下所有工區的統計數據，篩選工區的話，需要展示的列是該工區所有的車站，所有指定的是同一個DataGrid數據表，但是列Cells至動態變化的。

 

2、實現思路

　　在我們加載渲染DataGrid的時候，可以把列的值也帶過來，如Field，Title，Field指定列的值，title指定顯示的列名稱，動態加載列，實際上是這些值得動態變化。我們可以在后台拼接3個對應參數，第一個是列的field值，第二個是具體的數據，即rows，第三個是數據總數，即totle。

 

3、具體實現

　　參考下面js代碼

　　

function initDataGrid() {
            //清空數據表
            if ($('#dataTab').datagrid('getRows').length > 0) {
                $('#dataTab').datagrid('loadData', {total: 0, rows: []});
            }
            //
            $.ajax({
                url: '/XXX/jxNotes/yearJxNotesData.action?' + $('#searchform').serialize(),
                type: 'POST',
                dataType: 'json',
                cache: false,
                success: function (datas) {
                    var successData = {
                        total: datas.total,
                        rows: datas.rows
                    };
                    var arrays1 = [];
                    var arrays = [];
                    var heads = datas.headtab;
                    var orglength = getJsonLength(heads);
                    arrays1.push({field: 'index', width: '2%',title:'順號',align: 'center',rowspan:2,formatter: getPageNum});
                    arrays1.push({field: 'PROJECTNAME',title:'名稱', width: '8%',rowspan:2,align: 'center'});
                    arrays1.push({field: 'DEVTYPE', width: '9%',title:'類型',rowspan:2, align: 'center'});
                    arrays1.push({field: 'JX_CONTENT', width: '11%',title:'內容',rowspan:2, align: 'center'});
                    arrays1.push({field: 'danwei', width: '3%',title:'單位',rowspan:2, align: 'center'});
                    arrays1.push({field: '', width: '40%',title:'數量',colspan:(orglength+1),align: 'center'});
                    arrays1.push({field: 'PERIOD', width: '3%',title:'周期', align: 'center',rowspan:2, formatter: formatPeriod});
                    arrays1.push({field: '', width: '24%',title:'月份',colspan:12, align: 'center'});

                    arrays.push({field: 'DEVALL', width: '2%', align: 'center', formatter: hrefNum,title:'總數'});
                    $.each(heads, function (i) {
                        arrays.push({field: i, title: heads[i], width: '2%',formatter: hrefNum});
                    });
                    arrays.push({field: 'M1', width: '2%', align: 'center',title:'1',formatter: hrefNum});
                    arrays.push({field: 'M2', width: '2%', align: 'center',title:'2', formatter: hrefNum});
                    arrays.push({field: 'M3', width: '2%', align: 'center',title:'3', formatter: hrefNum});
                    arrays.push({field: 'M4', width: '2%', align: 'center',title:'4', formatter: hrefNum});
                    arrays.push({field: 'M5', width: '2%', align: 'center',title:'5', formatter: hrefNum});
                    arrays.push({field: 'M6', width: '2%', align: 'center',title:'6', formatter: hrefNum});
                    arrays.push({field: 'M7', width: '2%', align: 'center',title:'7', formatter: hrefNum});
                    arrays.push({field: 'M8', width: '2%', align: 'center',title:'8', formatter: hrefNum});
                    arrays.push({field: 'M9', width: '2%', align: 'center',title:'9', formatter: hrefNum});
                    arrays.push({field: 'M10', width: '2%', align: 'center',title:'10', formatter: hrefNum});
                    arrays.push({field: 'M11', width: '2%', align: 'center',title:'11', formatter: hrefNum});
                    arrays.push({field: 'M12', width: '2%', align: 'center',title:'12', formatter: hrefNum});
                    var columnsArray = [];
                    columnsArray.push(arrays1);//第一行
                    columnsArray.push(arrays);//第一行
                    console.log(columnsArray);

                    $('#dataTab').datagrid({
                        columns:columnsArray,
                        data:successData
                    });
                }
            });
        }

　　以上是一個js動態加載列的一段代碼。

　　（1）首先每次加載錢，先清空DataGrid。

　　（2）請求后台，返回json中有三個 對象，分別是totle，rows,headtab。headtab就是渲染列需要的東西，是一個Map，field對應title的一個鍵值對。

　　（3）可以看到，我用申明的數據循環接受headtab的map，以此渲染到dataGrid的Cells中去。

　　（4）因為實際業務涉及到跨行跨列的問題，所有以上代碼中有兩數組，分別是第一行和第二行的表頭部位。

　　（5）cells生成好后，就可以渲染dataGrid的數據了。

　　

　　最后參考以上java后台局部代碼

　　

　　因為具體業務的不同，這里就不貼后端代碼了，要注意的是headtab中的field值要和rows中對應的值要一致，這樣前端動態加載的cells才能識別值出來，不然動態加載成功

　　，數據也不會出來。