Jqgrid動態列多表頭

說明：jqgrid動態多表主要是一級頭（欄目）動態和二級表頭（欄目1、2、3、4、5...）動態

圖例

1：數據源是一個dataTable，拿到數據進行列明循環綁定，此處為二級表頭

//二級表頭
                var names = []; //顯示列名
                var model = []; //綁定列名
                var num = 1;  //設定num主要是區分前幾列固定不需要動態，可以單獨設置一些不同的屬性，如寬度、固定列等
                //此處因為數據源數組中的結構相同且不為空，直接遍歷索引為0的數據即可  data1.RptResultInfo.Result 是后台傳過來的DataTable
                $.each(data1.RptResultInfo.Result[0], function (key, value) {
                    if (num == 1) {
                        names.push("No");
                        model.push({
                            name: key,
                            index: key,
                            align: "center",
                            sortable: false,
                            frozen: true,
                            width: 50
                        });
                    } else if (num == 2) {
                        names.push(key);
                        model.push({
                            name: key,
                            index: key,
                            align: "center",
                            sortable: false,
                            frozen: true,
                            width: 150
                        });
                    } else {
                        names.push(key);
                        model.push({
                            name: key,
                            index: key,
                            align: "left",
                            sortable: false,
                            width: 100
                        });
                    }
                    num++;
                })

                jQuery("#j_tableList").jqGrid({
                    colNames: names,
                    colModel: model,
                    rowNum: 500,
                    footerrow: true,
                    pager: '#pager',
                    mtype: "post"//向后台請求數據的ajax的類型 可選post,get
                });
//滑動時凍結列設置
                $('#j_tableList').jqGrid('setFrozenColumns');                

2：此處為一級表頭，numberOfColumns：5是因為我的這個已經固定了每個5列，如果二級表是動態數量的話，可以在后台算好，傳一個LIst<T>類型對numberOfColumns屬性賦值即可。

 //一級表頭
                var topname = [];
 //data1.lms 是后台傳過來的一個List<string>類型的一級表頭
                $.each(data1.lms, function (key, value) {
                    topname.push({
                        startColumnName: value + "1", //從哪一列開始綁定
                        numberOfColumns: 5,//合並5列
                        titleText: value   //顯示值
                    });
                })
                $("#j_tableList").jqGrid('setGroupHeaders', {//多表頭
                    useColSpanStyle: true,
                    groupHeaders: topname
                });        

說明一下，一二級多表頭關聯時，一級表頭是通過startColumnName屬性來關聯上二級表頭

附帶效果圖：

sql：可以自行百度列轉行

jqgrid：

后台拼數據可以先把類目名稱提取出來，再把門店名稱進行和類目名稱合並成一行，統一傳回前台即可。

此查詢為ajax進行查詢，每次查詢之前，需要進行表格的清空，因為jqgrid拿 到數據是填充到html上的，所以需要進行清空html再進行綁定值

//清空表格
$("#table-box").html("");
var jqstr = ' <table id="j_tableList" class="table table-striped"></table><div class="pagination-wrap text-center" id="Pagination" style="display:none;"></div>';
$("#table-box").html(jqstr);