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,
                             50
                        });
                    } else if (num == 2) {
                        names.push(key);
                        model.push({
                            name: key,
                            index: key,
                            align: "center",
                            sortable: false,
                            frozen: true,
                             150
                        });
                    } else {
                        names.push(key);
                        model.push({
                            name: key,
                            index: key,
                            align: "left",
                            sortable: false,
                             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);