jqGrid三级分组表头-有合并列的样式

最新推荐文章于 2024-08-04 21:23:42 发布

佛佛ง

最新推荐文章于 2024-08-04 21:23:42 发布

阅读量1.8k

点赞数 2

分类专栏： jqGrid 文章标签： css html javascript

本文链接：https://blog.csdn.net/LzzMandy/article/details/120788916

版权

jqGrid 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最终的实现效果如下：

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

佛佛ง

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
jqGrid三级分组表头-有合并列的样式

最终的实现效果如下：HTML代码举例： <body> ···代码省略··· <table id="list2"></table> ···代码省略··· </body> javascript代码举例：从下往上设置，最下面三级表头colNames 、colModel 和平时的表格一样二级表头使用 setGroupHeaders 方法且colSpanStyle选项设置为true 一级表头使用 set.
复制链接

扫一扫