jqGrid过滤时分组状态

问题描述

我为我的jqGrid网格使用了一个过滤器，数据是分组的，默认情况下是第一个折叠状态。如果一个用户打开一个组或者2个（显示组），然后执行过滤器，网格重新加载数据，过滤正确，但是然后我松开了用户打开的组的扩展状态。有没有办法没有它，切换回默认的状态折叠时做一个过滤器？

感谢提前。

解决方案

我觉得你的问题很有趣。所以，从我+1。我做了一个演示，演示如何实现你的需求。

实现的主要思想与。我建议在数组 expandedGroups 中保存展开组的状态。我在jqGrid 4.0.0中添加了 onClickGroup 回调函数（参见）。我试图展开数组 expandedGroups 中的所有项目。

$在 loadComplete b $ b

这个实现的好处是，在分页，排序和过滤期间，扩展状态不会消失。

演示可以看到。下面是演示代码：
$ b

  var $ grid = $（＃list） ，expandedGroups = []; 
 
 $ grid.jqGrid（{
 // ...一些jqGrid参数
分组：true，
 groupingView：{
 groupField：['name ']，
 groupCollapse：true，
 groupDataSorted：true 
}，
 onClickGroup：function（hid，collapsed）{
 var idPrefix = this.id +ghead_ ，id，groupItem，i; 
 if（hid.length> idPrefix.length&& hid.substr（0，idPrefix.length）=== idPrefix）{
 id = hid。 substr（idPrefix.length）; 
 groupItem = this.p.groupingView.sortnames [0] [id]; 
 if（typeof（groupItem）！==undefined）{
i = $ .inArray（expandedGroups [i]，groups）; 
 if（！collapsed&< 0）{
 expandedGroups.push（groupItem）; 
} else if（collapsed & i> = 0）{
 expandedGroups.splice（i，1）; //从列表中删除groupItem 
} 
 } 
 
 loadComplete：function（）{
 var $ this = $（this），i，l，index，groups = this.p.groupingView.sortnames [0]; （i = 0，l = expandedGroups.length; i  index = groups.indexOf（expandedGroups [i]）的
。 
 if（i> = 0）{
 $ this.jqGrid（'groupingToggle'，this.id +'ghead_'+ index）; 
} 
} 
} 
}）; 
 $ grid.jqGrid（'navGrid'，'#pager'，{add：false，edit：false，del：false}，{}，{}，
 {multipleSearch：true， multipleGroup：true，closeOnEscape：true，showQuery：true，
 closeAfterSearch：true}）; 
  

UPDATED ：jqGrid的分组模块在很多部分都有所改变，回答。修改后的演示可以在这里找到。使用的代码中最重要的部分可以在下面看到：

grouping：true，
groupingView：{
groupField：[invdate]，
groupCollapse：true，
groupDataSorted：true
}，
onClickGroup：function（hid，collapsed）{
var idPrefix = this.id +ghead_，i，groupid，
$ this = $（this），$ b $ groups = $（this）.jqGrid（getGridParam，groupingView ）.groups，
l = groups.length;

if（！inOnClickGroup）{
inOnClickGroup = true; //设置为跳过递归
for（i = 0; i groupid = idPrefix + groups [i] .idx +_+ i;
if（groupid！== hid）{
$ this.jqGrid（groupingToggle，groupid）;
}
}
inOnClickGroup = false;




$ b变量 inOnClickGroup
$> code>在外部作用域中定义。

I am using a filter for my jqGrid grid, and the data is in groups, defaulting first state of collapsed. If a user open a group or 2 (expaning the groups) , then does the filter, the grid reloads the data, filters it correctly, but then I loose the expanded state of the groups the user opened. Is there a way to not have it, toggle back to the default state of collapsed when doing a filter?

Thanks in Advance.

解决方案

I find your question interesting. So +1 from me. I made a demo which shows how to implement your requirements.

The main idea of the implementation is the same as in the answer. I suggest just hold the state of expanded groups in an array expandedGroups. I use onClickGroup callback added in jqGrid 4.0.0 (see here). Inside of loadComplete callback I try to expand all items from the array expandedGroups.

The advantage of the implementation is that the expanded state not disappear during paging, sorting and filtering.

The demo you can see here. Below in the code from the demo:

var $grid = $("#list"), expandedGroups = [];

$grid.jqGrid({
    // ... some jqGrid parameters
    grouping: true,
    groupingView: {
        groupField: ['name'],
        groupCollapse: true,
        groupDataSorted: true
    },
    onClickGroup: function (hid, collapsed) {
        var idPrefix = this.id + "ghead_", id, groupItem, i;
        if (hid.length > idPrefix.length && hid.substr(0, idPrefix.length) === idPrefix) {
            id = hid.substr(idPrefix.length);
            groupItem = this.p.groupingView.sortnames[0][id];
            if (typeof (groupItem) !== "undefined") {
                i = $.inArray(expandedGroups[i], groups);
                if (!collapsed && i < 0) {
                    expandedGroups.push(groupItem);
                } else if (collapsed && i >= 0) {
                    expandedGroups.splice(i, 1); // remove groupItem from the list
                }
            }
        }
    },
    loadComplete: function () {
        var $this = $(this), i, l, index, groups = this.p.groupingView.sortnames[0];
        for (i = 0, l = expandedGroups.length; i < l; i++) {
            index = groups.indexOf(expandedGroups[i]);
            if (i >= 0) {
                $this.jqGrid('groupingToggle', this.id + 'ghead_' + index);
            }
        }
    }
});
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {},
    {multipleSearch: true, multipleGroup: true, closeOnEscape: true, showQuery: true,
        closeAfterSearch: true});

UPDATED: Grouping module of jqGrid are changed in many parts since my original answer. The modified demo one can find here. The most important part of the code used one can see below

grouping: true,
groupingView: {
    groupField: ["invdate"],
    groupCollapse: true,
    groupDataSorted: true
},
onClickGroup: function (hid, collapsed) {
    var idPrefix = this.id + "ghead_", i, groupid,
        $this = $(this),
        groups = $(this).jqGrid("getGridParam", "groupingView").groups,
        l = groups.length;

    if (!inOnClickGroup) {
        inOnClickGroup = true; // set to skip recursion
        for (i = 0; i < l; i++) {
            groupid = idPrefix + groups[i].idx + "_" + i;
            if (groupid !== hid) {
                $this.jqGrid("groupingToggle", groupid);
            }
        }
        inOnClickGroup = false;
    }
}

The variable inOnClickGroup are defined in the outer scope.

这篇关于jqGrid过滤时分组状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！