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

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


[img]http://dl.iteye.com/upload/attachment/0083/0858/ce52d6ad-513c-357c-8d3a-082a612b8369.jpg[/img]


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基础上添加的三级表头代码。在这里和大家分享一下。由于公司项目需要,开发了此功能。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现 jqgrid 表头的筛选下拉框,可以按照以下步骤操作: 1. 在 colModel 中设置 stype 为 select,如下: ``` { name: 'xxx', index: 'xxx', stype: 'select', searchoptions: { value: ':All;1:Option1;2:Option2;3:Option3' } } ``` 其中,value 属性中的字符串是下拉框的选项,格式为 label:value,多个选项之间用分号隔开,第一个选项必须为 All(或者 Any),表示所有选项。 2. 在 jqGrid 的 options 中添加如下代码: ``` { // ... postData: { filters: function () { var columnData = $("#grid").jqGrid('getGridParam', 'postData').columns; var postData = JSON.stringify({ groupOp: "AND", rules: [{ field: columnData[0].name, op: "eq", data: columnData[0].searchValue }, { field: columnData[1].name, op: "eq", data: columnData[1].searchValue }] }); return postData; } }, // ... } ``` 其中,postData 中的 filters 属性用于设置筛选条件,rules 数组中的每个元素表示一个筛选条件,包含三个属性:field(列名)、op(操作符)、data(筛选值)。这里的 columnData 是获取当前 jqGrid 的 postData 中的 columns 属性。 3. 在 jqGrid 的 options 中设置 search 属性为 true: ``` { // ... search: true, // ... } ``` 4. 在 jqGrid 中添加一个按钮,用于触发表头筛选: ``` $("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false }) .jqGrid('navButtonAdd', '#pager', { caption: "Search", title: "Toggle Searching Toolbar", buttonicon: 'ui-icon-search', onClickButton: function () { $("#grid")[0].toggleToolbar(); } }); ``` 这样就可以实现 jqgrid 表头的筛选下拉框了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值