jqGrid设置多级表头（包含冻结列，合并相同行，多级表头）

效果1如图：

js代码如下：

  //初始化所有grid
function initAllGrid(){
        var colModel = [{label:'省（区、市）',name:'provice',index:'provice', width:90,align:"center",frozen:true,
                            cellattr: function(rowId, tv, rawObject, cm, rdata) {
                                  //合并单元格
                                 return 'id=\'provice' + rowId + "\'";
                            }
                },{label:'地市（镇、区）',name:'area_name',index:'area_name', width:90, align:"center",frozen:true,
                    cellattr: function(rowId, tv, rawObject, cm, rdata) {
                          //合并单元格
                         return 'id=\'area_name' + rowId + "\'";
                    }
                },{label:'核心机楼名称',name:'csb_name',index:'csb_name', width:110,align:"center",frozen:true
                },{label:'月份',name:'time_id',index:'time_id', width:90, align:"center"
                },//市电停电情况
                {label:'一路市电停电次数（次）',name:'ac1_pf_times',index:'ac1_pf_times', width:150, align:"center"
                },{label:'一路市电停电总时长（分钟）',name:'ac1_pf_duration',index:'ac1_pf_duration', width:170, align:"center"
                },{label:'两路市电同时停电次数',name:'ac2_pf_times',index:'ac2_pf_times', width:150, align:"center"
                },{label:'两路市电同时停电总时长（分钟）',name:'ac2_pf_duration',index:'ac2_pf_duration', width:150, align:"center"
                },//油机使用情况（不包含测试）
                {label:'市电停电后油机启动逻辑',name:'oe_startup_logic',index:'oe_startup_logic', width:150,align:"center"
                },{label:'油机启动方式',name:'oe_startup',index:'oe_startup', width:100, align:"center"
                },{label:'油机实际启动次数（次）',name:'oe_startup_times',index:'oe_startup_times', width:110, align:"center"
                },{label:'油机实际启动总时长（分钟）',name:'oe_startup_duration',index:'oe_startup_duration', width:150, align:"center"
                }];
        _initGrid('con_grid_div_grid',colModel,470,15);
    }

//初始化grid的方法
    function _initGrid(gridType,colModel,height,rownum){//
        var me = this;
        $("#"+gridType).jqGrid({
            height: height,
            rowNum : rownum,
            scrollOffset :0,
            datatype: "local",
            colModel:colModel,
            autowidth : false,
            shrinkToFit : false,
            autoScroll: true,
            pager: "#"+gridType+"Pager",
            gridComplete: function() {
                //②在gridComplete调用合并方法
                var gridName = gridType;
                Merger(gridName, 'provice');
                Merger(gridName, 'area_name');
            }
        });
 //公共调用方法
        function Merger(gridName, CellName) {
             //得到显示到界面的id集合
            var mya = $("#" + gridName + "").getDataIDs();
            //当前显示多少条
            var length = mya.length;
            for (var i = 0; i < length; i++) {
                 //从上到下获取一条信息
                 var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
                 //定义合并行数
                 var rowSpanTaxCount = 1;
                 for (j = i + 1; j <= length; j++) {
                    //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
                     var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
                     if (before[CellName] == end[CellName]) {
                         rowSpanTaxCount++;
                         $("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
                     } else {
                         rowSpanTaxCount = 1;
                         break;
                     }
                     $("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
                 }
            }
        }
$("#"+gridType).jqGrid('setGroupHeaders',{
             useColSpanStyle: true, 
             groupHeaders:[
                     {startColumnName : 'ac1_pf_times',numberOfColumns : 4,titleText : '市电停电情况'},
                     {startColumnName : 'oe_startup_logic',numberOfColumns : 4,titleText : '油机使用情况（不包含测试）'},
                     {startColumnName : 'ac1_pf_duration_per',numberOfColumns : 4,titleText : '最长时长统计'}
                 ]    
            });
        
        $("#"+gridType).jqGrid('setFrozenColumns');//滑动时此列冻结设置
    }  

View Code