实现jqGrid三级表头功能，支持冻结，拖动

基于jqGrid表格上，实现三级表头。首先，看看实现的效果





jqGrid的demo上有这样一句话Note that group header is suppored only when useColSpanStyle is false ，指出只支持useColSpanStyle 为 false的冻结，所以采用useColSpanStyle=true冻结以后会存在一些问题。

在实现三级表头的同时，也把一些问题考虑在内了，先大概说明本人修改的代码部分，附件也会把源码和三级表头代码附上，基于4.4.4版本的，上面有标注ljq的，就是本人修改的代码。

添加和修改的代码部分有：
(1)在源码setGroupHeaders方法后面加上新方法setComplexHeaders

(2)添加冻结表头添加方法： createFrozenHtable

(3)修改源码setFrozenColumns方法，支持三级表头冻结

(4)修改源码showHideCol方法，添加三级表头处理

(5)修改源码dragStart: function(i,x,y) {//当存在滚动条时，处理冻结列拖动图标问题，
如果使用了冻结功能，当表格出现横向滚动条并将滚动条拖到右边，点击冻结列的拖动，拖动图标将会是里面表头的位置。

(6)修改源码getColumnHeaderIndex方法，冻结列的拖动图标获取不正确，需要兼容冻结情况，
if (th === headers[i].el || (ts.p.frozenColumns && th.id === headers[i].el.id)) {

(7)setFrozenColumns方法里面有个$($t).bind('jqGridOnSortCol.setFrozenColumns', function (index, idxcol) {，
如果原生二级表头采用useColSpanStyle=true，点击冻结列排序按钮没显示，
在这个地方可以修改一下变量previousSelectedTh和newSelectedTh，
可以通过colModel的index方式去取name,然后通过tr的id去获取,这样会通用很多。不过附件没有处理。



下面是调用的代码：
var complexoption = {
        complexHeaders:{
                 defaultStyle:true,
                 threeLevel:[     
                 {startColumnName:"id",numberOfColumns:2,titleText:"三级表头1"},
                 {startColumnName:"name",numberOfColumns:5,titleText:"三级表头2"}
                            ],
                 twoLevel:[     
                {startColumnName:"name",numberOfColumns:2,titleText:"二级表头1"},
                {startColumnName:"total",numberOfColumns:2,titleText:"二级表头2"}
                          ]
             }
                    };
jQuery("#list").jqGrid("setComplexHeaders",complexoption);
jQuery("#list").jqGrid("setFrozenColumns");


defaultStyle为true表示默认样式，可以配置为false试试,
threeLevel指定三级表头
twoLevel指定二级表头


附件是基于源码4.4.4基础上添加的三级表头代码。在这里和大家分享一下。由于公司项目需要，开发了此功能。

评论

5 楼 CrazyDream_ 2016-11-28  

如果只用二级表头就会出错！

4 楼 liloo_looli 2016-06-20  

3 楼 yingwei670010378 2014-12-19  

牛人你好 怎么继续扩展 支持四级甚至 多级呢

PS：利用jqgrid 自带设置表头时，三级以上合并时，一级表头就会往上跑  无解

2 楼 siukak 2014-11-12  

相当不错！但是支持多级就更好了

1 楼 itlangqun 2014-06-23  

厉害！