效果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');//滑动时此列冻结设置 }
//初始化所有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" },//最长时长统计 {label:'一路市电停电单次最大时长（分钟）',name:'ac1_pf_duration_per',index:'ac1_pf_duration_per', width:230, align:"center" },{label:'两路市电停电单次最大时长（分钟）',name:'ac2_pf_duration_per',index:'ac2_pf_duration_per', width:220, align:"center" },{label:'油机带载单次最大时长（分钟）',name:'oe_load_duration_per',index:'oe_load_duration_per', width:210, align:"center" },{label:'蓄电池组单次放电最大时长（分钟）',name:'bat_discharge_duration_per',index:'bat_discharge_duration_per', width:230, align:"center" },//蓄电池放电情况统计 {label:'蓄电池组放电次数（组.次）',name:'bat_discharge_times',index:'bat_discharge_times', width:190, align:"center" },{label:'蓄电池组放电总时长（组.分钟）',name:'bat_discharge_duration',index:'bat_discharge_duration', width:190, align:"center" }, {label:'交流系统可用度',name:'acs_avail',index:'acs_avail', width:100, align:"center" },{label:'直流系统可用度',name:'dcs_avail',index:'dcs_avail', width:100, 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 : '最长时长统计'}, {startColumnName : 'bat_discharge_times',numberOfColumns : 2,titleText : '蓄电池放电情况统计'} ] }); $("#"+gridType).jqGrid('setFrozenColumns');//滑动时此列冻结设置 }
效果2如图：
js代码如下：
define([], function() { function initTab(){ initAllGrid(); $('i[name="reportSearch"]').live("click",function(){ //过滤 $("#search_con_grid_div_grid").click(); }); } //初始化所有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:'time_id',index:'time_id', width:80, align:"center" },//核心机楼 {label:'核心机楼数量',name:'csb_cnt',index:'csb_cnt', width:90, align:"center" },{label:'纳入监控的数量',name:'csb_monit_cnt',index:'csb_monit_cnt', width:100, align:"center" },{label:'监控覆盖率（百分比）',name:'t1',index:'t1', width:130, align:"center" },//传输汇聚节点机房 {label:'传输汇聚节点机房数量',name:'tnsr_cnt',index:'tnsr_cnt', width:140,align:"center" },{label:'纳入监控的数量',name:'tnsr_monit_cnt',index:'tnsr_monit_cnt', width:100, align:"center" },{label:'监控覆盖率（百分比）',name:'t2',index:'t2', width:130, align:"center" },//固定油机-核心机楼 {label:'固定油机数量（台）',name:'csb_foe_cnt',index:'csb_foe_cnt', width:120, align:"center" },{label:'纳入监控的数量（台）',name:'csb_foe_monit_cnt',index:'csb_foe_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t3',index:'t3', width:130, align:"center" },//固定油机-传输汇聚机房 {label:'固定油机数量（台）',name:'tnsr_foe_cnt',index:'tnsr_foe_cnt', width:120, align:"center" },{label:'纳入监控的数量（台）',name:'tnsr_foe_monit_cnt',index:'tnsr_foe_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t4',index:'t4', width:130, 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).setComplexGroupHeaders({ useColSpanStyle: true, groupHeaders:[//二级表头 {startColumnName:"csb_cnt",numberOfColumns:3,titleText:"核心机楼"}, {startColumnName:"tnsr_cnt",numberOfColumns:3,titleText:"传输汇聚节点机房"}, {startColumnName:"csb_foe_cnt",numberOfColumns:3,titleText:"核心机楼"}, {startColumnName:"tnsr_foe_cnt",numberOfColumns:3,titleText:"传输汇聚机房"}, {startColumnName:"csb_tf_cnt",numberOfColumns:3,titleText:"核心机楼"}, {startColumnName:"tnsr_tf_cnt",numberOfColumns:3,titleText:"传输汇聚机房"} ], complexGroupHeaders:[//三级表头，和二级表头用法一样 {startColumnName:"csb_foe_cnt",numberOfColumns:6,titleText:"固定油机"}, {startColumnName:"csb_tf_cnt",numberOfColumns:6,titleText:"变压器"}, {startColumnName:"csb_bat_cnt",numberOfColumns:6,titleText:"铅酸蓄电池"}, {startColumnName:"csb_swt_cnt",numberOfColumns:6,titleText:"开关电源系统"}, {startColumnName:"csb_ups_cnt",numberOfColumns:6,titleText:"UPS系统"}, {startColumnName:"csb_airc_cnt",numberOfColumns:6,titleText:"风冷精密空调"} ] }); $("#"+gridType).jqGrid('setFrozenColumns');//滑动时此列冻结设置 $("#"+gridType).navGrid("#"+gridType+"Pager", {//过滤 search : true, // show search button on the toolbar add : false, edit : false, del : false, refresh : false },{}, // edit options {}, // add options {}, // delete options { multipleSearch : true, closeAfterSearch : true, closeOnEscape : true, searchOnEnter : true, Find : "查找" }); } return { initAllGrid : initAllGrid, initTab:initTab }; })
define([], function() { function initTab(){ initAllGrid(); $('i[name="reportSearch"]').live("click",function(){ //过滤 $("#search_con_grid_div_grid").click(); }); } //初始化所有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:'time_id',index:'time_id', width:80, align:"center" },//核心机楼 {label:'核心机楼数量',name:'csb_cnt',index:'csb_cnt', width:90, align:"center" },{label:'纳入监控的数量',name:'csb_monit_cnt',index:'csb_monit_cnt', width:100, align:"center" },{label:'监控覆盖率（百分比）',name:'t1',index:'t1', width:130, align:"center" },//传输汇聚节点机房 {label:'传输汇聚节点机房数量',name:'tnsr_cnt',index:'tnsr_cnt', width:140,align:"center" },{label:'纳入监控的数量',name:'tnsr_monit_cnt',index:'tnsr_monit_cnt', width:100, align:"center" },{label:'监控覆盖率（百分比）',name:'t2',index:'t2', width:130, align:"center" },//固定油机-核心机楼 {label:'固定油机数量（台）',name:'csb_foe_cnt',index:'csb_foe_cnt', width:120, align:"center" },{label:'纳入监控的数量（台）',name:'csb_foe_monit_cnt',index:'csb_foe_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t3',index:'t3', width:130, align:"center" },//固定油机-传输汇聚机房 {label:'固定油机数量（台）',name:'tnsr_foe_cnt',index:'tnsr_foe_cnt', width:120, align:"center" },{label:'纳入监控的数量（台）',name:'tnsr_foe_monit_cnt',index:'tnsr_foe_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t4',index:'t4', width:130, align:"center" },//变压器-核心机楼 {label:'变压器数量（台）',name:'csb_tf_cnt',index:'csb_tf_cnt', width:105, align:"center" },{label:'纳入监控的数量（台）',name:'csb_tf_monit_cnt',index:'csb_tf_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t5',index:'t5', width:130, align:"center" },//变压器-传输汇聚机房 {label:'变压器数量（台）',name:'tnsr_tf_cnt',index:'tnsr_tf_cnt', width:105, align:"center" },{label:'纳入监控的数量（台）',name:'tnsr_tf_monit_cnt',index:'tnsr_tf_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t6',index:'t6', width:130, align:"center" },//铅酸蓄电池-核心机楼 {label:'蓄电池数量（组）',name:'csb_bat_cnt',index:'csb_bat_cnt', width:105, align:"center" },{label:'纳入监控的数量（组）',name:'csb_bat_monit_cnt',index:'csb_bat_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t7',index:'t7', width:130, align:"center" },//铅酸蓄电池-传输汇聚机房 {label:'蓄电池数量（组）',name:'tnsr_bat_cnt',index:'tnsr_bat_cnt', width:105, align:"center" },{label:'纳入监控的数量（组）',name:'tnsr_bat_monit_cnt',index:'tnsr_bat_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t8',index:'t8', width:130, align:"center" },//开关电源系统-核心机楼 {label:'开关电源系统数量（套）',name:'csb_swt_cnt',index:'csb_swt_cnt', width:150, align:"center" },{label:'纳入监控的数量（套）',name:'csb_swt_monit_cnt',index:'csb_swt_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t9',index:'t9', width:130, align:"center" },//开关电源系统-传输汇聚机房 {label:'开关电源系统数量（套）',name:'tnsr_swt_cnt',index:'tnsr_swt_cnt', width:150, align:"center" },{label:'纳入监控的数量（套）',name:'tnsr_swt_monit_cnt',index:'tnsr_swt_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t10',index:'t10', width:130, align:"center" },//UPS系统-核心机楼 {label:'UPS单机数量（套）',name:'csb_ups_cnt',index:'csb_ups_cnt', width:120, align:"center" },{label:'纳入监控的数量（套）',name:'csb_ups_monit_cnt',index:'csb_ups_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t11',index:'t11', width:130, align:"center" },//UPS系统-传输汇聚机房 {label:'UPS单机数量（套）',name:'tnsr_ups_cnt',index:'tnsr_ups_cnt', width:120, align:"center" },{label:'纳入监控的数量（套）',name:'tnsr_ups_monit_cnt',index:'tnsr_ups_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t12',index:'t12', width:130, align:"center" },//风冷精密空调-核心机楼 {label:'风冷空调数量（台）',name:'csb_airc_cnt',index:'csb_airc_cnt', width:120, align:"center" },{label:'纳入监控的数量（台）',name:'csb_airc_monit_cnt',index:'csb_airc_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t13',index:'t13', width:130, align:"center" },//风冷精密空调-传输汇聚机房 {label:'风冷空调数量（台）',name:'tnsr_airc_cnt',index:'tnsr_airc_cnt', width:120, align:"center" },{label:'纳入监控的数量（台）',name:'tnsr_airc_monit_cnt',index:'tnsr_airc_monit_cnt', width:130, align:"center" },{label:'监控覆盖率（百分比）',name:'t14',index:'t14', width:130, 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).setComplexGroupHeaders({ useColSpanStyle: true, groupHeaders:[//二级表头 {startColumnName:"csb_cnt",numberOfColumns:3,titleText:"核心机楼"}, {startColumnName:"tnsr_cnt",numberOfColumns:3,titleText:"传输汇聚节点机房"}, {startColumnName:"csb_foe_cnt",numberOfColumns:3,titleText:"核心机楼"}, {startColumnName:"tnsr_foe_cnt",numberOfColumns:3,titleText:"传输汇聚机房"}, {startColumnName:"csb_tf_cnt",numberOfColumns:3,titleText:"核心机楼"}, {startColumnName:"tnsr_tf_cnt",numberOfColumns:3,titleText:"传输汇聚机房"}, {startColumnName:"csb_bat_cnt",numberOfColumns:3,titleText:"核心机楼"}, {startColumnName:"tnsr_bat_cnt",numberOfColumns:3,titleText:"传输汇聚机房"}, {startColumnName:"csb_ups_cnt",numberOfColumns:3,titleText:"核心机楼"}, {startColumnName:"tnsr_ups_cnt",numberOfColumns:3,titleText:"传输汇聚机房"}, {startColumnName:"csb_airc_cnt",numberOfColumns:3,titleText:"核心机楼"}, {startColumnName:"tnsr_airc_cnt",numberOfColumns:3,titleText:"传输汇聚机房"} ], complexGroupHeaders:[//三级表头，和二级表头用法一样 {startColumnName:"csb_foe_cnt",numberOfColumns:6,titleText:"固定油机"}, {startColumnName:"csb_tf_cnt",numberOfColumns:6,titleText:"变压器"}, {startColumnName:"csb_bat_cnt",numberOfColumns:6,titleText:"铅酸蓄电池"}, {startColumnName:"csb_swt_cnt",numberOfColumns:6,titleText:"开关电源系统"}, {startColumnName:"csb_ups_cnt",numberOfColumns:6,titleText:"UPS系统"}, {startColumnName:"csb_airc_cnt",numberOfColumns:6,titleText:"风冷精密空调"} ] }); $("#"+gridType).jqGrid('setFrozenColumns');//滑动时此列冻结设置 $("#"+gridType).navGrid("#"+gridType+"Pager", {//过滤 search : true, // show search button on the toolbar add : false, edit : false, del : false, refresh : false },{}, // edit options {}, // add options {}, // delete options { multipleSearch : true, closeAfterSearch : true, closeOnEscape : true, searchOnEnter : true, Find : "查找" }); } return { initAllGrid : initAllGrid, initTab:initTab
8897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
