jqGrid三级分组表头-有合并列的样式
作者：互联网
最终的实现效果如下：
HTML代码举例：
<body>
···代码省略···
<table id="list2"></table>
···代码省略···
</body>
javascript代码举例：
- 从下往上设置，最下面三级表头colNames 、colModel 和平时的表格一样
- 二级表头使用 setGroupHeaders 方法且colSpanStyle选项设置为true
- 一级表头使用 setComplexGroupHeaders方法
jQuery("#list2").jqGrid(
{
url : '***',
datatype : "json",
height: 50, //勿修改
autowidth: true,
// shrinkToFit : false,// shrinkToFit aotuScroll 增加这两个参数并设为false
// aotuScroll : false,// 横向滚动条自动显示
colNames : ['时间区间','总流量（车次）','日均（车次）','环比','同比','流量','日均',
'占比','流量','日均','占比','流量','日均','占比','流量','日均','占比','流量','日均','占比','流量','日均','占比','流量','日均','占比','流量','日均',
'占比','流量','日均','占比'],
colModel : [
{name : 'flowdate',index : 'flowdate',width:200,align: 'center'},//区间
{name : 'flowzllcc',index : 'flowzllcc',width:200,align: 'center'},
{name : 'flowrjcc',index : 'flowrjcc',width:200,align: 'center'},
{name : 'flowhb',index : 'flowhb',width:200,align: 'center'},
{name : 'flowtb',index : 'flowtb',width:200,align: 'center'},
{name : 'flowgtcjdll',index : 'flowgtcjdll',width:200,align: 'center'},//GTC(近端)
{name : 'flowgtcjdrj',index : 'flowgtcjdrj',width:200,align: 'center'},
{name : 'flowgtcjdzb',index : 'flowgtcjdzb',width:200,align: 'center'},
{name : 'flowpjydll',index : 'flowpjydll',width:200,align: 'center'},//平价(远端)
{name : 'flowpjydrj',index : 'flowpjydrj',width:200,align: 'center'},
{name : 'flowpjydzb',index : 'flowpjydzb',width:200,align: 'center'},
{name : 'flowmfcllll',index : 'flowmfcllll',width:200,align: 'center'},//免费车流量
{name : 'flowmfcllrj',index : 'flowmfcllrj',width:200,align: 'center'},
{name : 'flowmfcllzb',index : 'flowmfcllzb',width:200,align: 'center'},
{name : 'flowsfcllll',index : 'flowsfcllll',width:200,align: 'center'},//'收费车流量
{name : 'flowsfcllrj',index : 'flowsfcllrj',width:200,align: 'center'},
{name : 'flowsfcllzb',index : 'flowsfcllzb',width:200,align: 'center'},
{name : 'flowgycll',index : 'flowgycll',width:200,align: 'center'},//过夜车
{name : 'flowgycrj',index : 'flowgycrj',width:200,align: 'center'},
{name : 'flowgyczb',index : 'flowgyczb',width:200,align: 'center'},
{name : 'flowfgycll',index : 'flowfgycll',width:200,align: 'center'},//非过夜车
{name : 'flowfgycrj',index : 'flowfgycrj',width:200,align: 'center'},
{name : 'flowfgyczb',index : 'flowfgyczb',width:200,align: 'center'},
{name : 'flowbdcqll',index : 'flowbdcqll',width:200,align: 'center'},//本地车(青)
{name : 'flowbdcqrj',index : 'flowbdcqrj',width:200,align: 'center'},
{name : 'flowbdcqzb',index : 'flowbdcqzb',width:200,align: 'center'},
{name : 'flowsnqtsclll',index : 'flowsnqtsclll',width:200,align: 'center'},//省内其他市车(鲁)
{name : 'flowsnqtsclrj',index : 'flowsnqtsclrj',width:200,align: 'center'},
{name : 'flowsnqtsclzb',index : 'flowsnqtsclzb',width:200,align: 'center'},
{name : 'flowswcll',index : 'flowswcll',width:200,align: 'center'},//省外车
{name : 'flowswcrj',index : 'flowswcrj',width:200,align: 'center'},
{name : 'flowswczb',index : 'flowswczb',width:200,align: 'center'},
],
jsonReader : {
root:"dataRows",
page: "curPageNo",
total: "totalPages",
records: "totalRecords",
repeatitems: false,
id: "0"
},
// rowNum : 20,
// rowList: [10, 20, 50],
// rownumbers: true,
// rownumWidth: 50,
// recordtext: "显示 {0} - {1}条， 共 {2}条",
// sortname : 'jctime',
// sortorder: 'desc',
// pager : '#pager2',
altRows: true,
mtype : "post",
viewrecords : true,
caption : "流量汇总报表",
});
//二级表头合并
jQuery("#list2").jqGrid('setGroupHeaders',{
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'flowgtcjdll', numberOfColumns: 3, titleText: 'GTC(近端)'},
{startColumnName: 'flowpjydll', numberOfColumns: 3, titleText: '平价(远端)'},
{startColumnName: 'flowmfcllll', numberOfColumns: 3, titleText: '免费车流量'},
{startColumnName: 'flowsfcllll', numberOfColumns: 3, titleText: '收费车流量'},
{startColumnName: 'flowgycll', numberOfColumns: 3, titleText: '过夜车'},
{startColumnName: 'flowfgycll', numberOfColumns: 3, titleText: '非过夜车'},
{startColumnName: 'flowbdcqll', numberOfColumns: 3, titleText: '本地车(青)'},
{startColumnName: 'flowsnqtsclll', numberOfColumns: 3, titleText: '省内其他市车(鲁)'},
{startColumnName: 'flowswcll', numberOfColumns: 3, titleText: '省外车'},
],
});
//一级表头合并
jQuery("#list2").jqGrid("setComplexGroupHeaders",{
complexGroupHeaders:[
{startColumnName:'flowzllcc',numberOfColumns:4,titleText:'总流量'},
{startColumnName:'flowgtcjdll',numberOfColumns:6,titleText:'停车场'},
{startColumnName:'flowmfcllll',numberOfColumns:6,titleText:'停车缴费'},
{startColumnName:'flowgycll',numberOfColumns:6,titleText:'停车时长'},
{startColumnName:'flowbdcqll',numberOfColumns:9,titleText:'车辆属地'},
]
});
注意：如果console中提示jqGrid没有setComplexGroupHeaders方法，则需要引入插件jquery.jqGrid.groupHeader-0.2.1.js
标签：index,jqGrid,200,align,center,表头,width,分组,name 来源： https://blog.csdn.net/LzzMandy/article/details/120788916