jqgrid三级表头

针对jqgrid4.3.2进行表头扩展，效果如下：

 

0.1版本用法：

jQuery("#grid_id").setComplexGroupHeaders({

 useColSpanStyle: true, 

 groupHeaders:[

{startColumnName: 'sex', numberOfColumns: 3, titleText: '基本信息二'},

{startColumnName: 'name2', numberOfColumns: 2, titleText: '基本信息三'},

{startColumnName: 'age2', numberOfColumns: 2, titleText: '基本信息四'}

 ],

 complexGroupHeaders:[//三级表头，和二级表头用法一样

    {startColumnName:'name',numberOfColumns:5,titleText:'基本信息'}

 ]

});

 

或者：jQuery("# grid_id ").jqGrid(' setComplexGroupHeaders ',{

 useColSpanStyle: true, 

  groupHeaders:[

{startColumnName: 'sex', numberOfColumns: 3, titleText: '基本信息二'},

{startColumnName: 'name2', numberOfColumns: 2, titleText: '基本信息三'},

{startColumnName: 'age2', numberOfColumns: 2, titleText: '基本信息四'}

  ],

  complexGroupHeaders:[//三级表头，和二级表头用法一样

     {startColumnName:'name',numberOfColumns:5,titleText:'基本信息'}

  ]

         });

更新，重要提示，建议使用0.2版本（兼容0.1）：

0.2版本用法，可以在原有jqgrid基础上使用：

 

//先使用jqgrid提供的api进行，设置二级表头

jQuery("#grid_id").jqGrid("setGroupHeaders",{

 useColSpanStyle: true, 

 groupHeaders:[

{startColumnName: 'name', numberOfColumns: 2, titleText: '基本信息一'},

{startColumnName: 'age', numberOfColumns: 2, titleText: '基本信息二'},

{startColumnName: 'name2', numberOfColumns: 2, titleText: '基本信息三'},

{startColumnName: 'age2', numberOfColumns: 2, titleText: '基本信息四'}

 ]

});

//单独调用该方法，设置三级表头

jQuery("#grid_id").jqGrid("setComplexGroupHeaders",{

 complexGroupHeaders:[

    {startColumnName:'name',numberOfColumns:4,titleText:'基本信息A'},

    {startColumnName:'deptname',numberOfColumns:5,titleText:'基本信息B'}

 ]

});

当然你可以按照0.1版本方式来书写，建议先调用jqgrid原始api，在调用本人提供的api设置三级表头。

 

之前没有测试IE环境，0.2.1修复了IE下面错位的问题。建议使用0.2.1版本。

 

 

评论

14 楼 li431911 2016-12-03  

使用之后，没有合并的列会跑到前面去

13 楼 浪子铭铭 2016-11-05  

Thank you very much!

12 楼 yingwei670010378 2014-12-09  

evilowl 写道

IE下总是提示‘startColumnName’ 为空或不是对象，三级表头无法实现。
使用版本为：jquery.jqGrid.groupHeader-0.2.1

同样问题

11 楼 yingwei670010378 2014-12-09  

yingwei670010378 写道

楼主 你好 请问下设置完四级表头后 一点击刷新 就会多个表头（二级表头多复制了次变成五级了）
而且 jqgrid自身的好像和你的有冲突 我用的是query.jqGrid.groupHeader-0.2.1.rar
您这个支持四级表头？如果支持 该怎么继续加
(1.5

10 楼 yingwei670010378 2014-12-09  

楼主 你好 请问下设置完四级表头后 一点击刷新 就会多个表头（二级表头多复制了次变成五级了）
而且 jqgrid自身的好像和你的有冲突 我用的是query.jqGrid.groupHeader-0.2.1.rar (1.5

9 楼 yingwei670010378 2014-12-09  

楼主 你好 请问下设置完四级表头后 一点击刷新 就会多个表头（二级表头多复制了次变成五级了）

8 楼 siukak 2014-11-11  

显示隐藏列的时候就不好用了
这样相当于直接jquery插入<th>

7 楼 Take-off 2013-12-26  

Take-off 写道

能否 给我第一张图片的 源码 我参考 谢谢

开启分组后  3级表头 会消失

6 楼 Take-off 2013-12-26  

能否 给我第一张图片的 源码 我参考 谢谢

5 楼 飞飞飞天猪 2013-03-04  

飞飞飞天猪 写道

锁定表头的时候 样式 不太对

搞这块的同事 写了个函数 在楼主改之前 各位可以先用一下

function treehead(){
				$(".frozen-div").find(".jqg-second-row-header").css("display","none");
				$(".frozen-div").find(".jqg-third-row-header").css("display","none");
				$(".frozen-div").find(".ui-th-column-header").css("display","none");
				$(".frozen-div").find(".ui-jqgrid-htable").css("height","68px");
				$(".frozen-div").find(".ui-jqgrid-htable").find(".jqg-four-row-header").css("height","68px");
			}

4 楼 飞飞飞天猪 2013-02-27  

锁定表头的时候 样式 不太对

3 楼 evilowl 2012-10-18  

IE下总是提示‘startColumnName’ 为空或不是对象，三级表头无法实现。
使用版本为：jquery.jqGrid.groupHeader-0.2.1

2 楼 cjblog 2012-10-12  

szhlf 写道

功能不错，不过IE6上表头错乱。

该错误已经修正。

1 楼 szhlf 2012-10-12  

功能不错，不过IE6上表头错乱。