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

2021-10-15 19:05:56 阅读：303 来源： 互联网

标签：index jqGrid 200 align center 表头 width 分组 name

最终的实现效果如下：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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