jqGrid 过滤时的分组状态

发布于 2024-12-18 16:13:19 字数 143 浏览 0 评论 0原文

我正在为 jqGrid 网格使用过滤器,数据分组,默认第一个状态为折叠。如果用户打开一个或两个组(展开组),则进行过滤,网格重新加载数据,正确过滤它,但随后我会松开用户打开的组的展开状态。有没有办法不使用它,在执行过滤器时切换回默认的折叠状态?

提前致谢。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

给妤﹃绝世温柔 2024-12-25 16:13:19

我觉得你的问题很有趣。所以我+1。我做了一个演示,展示了如何实现您的要求。

实现的主要思想与答案中的相同。我建议仅将扩展组的状态保存在数组 expandedGroups 中。我使用 jqGrid 4.0.0 中添加的 onClickGroup 回调(请参阅 此处)。在 loadComplete 回调内部,我尝试展开数组 expandedGroups 中的所有项目。

实现的优点是在分页、排序和过滤过程中扩展状态不会消失。

您可以在此处查看演示。下面是演示中的代码:

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});

更新:自我最初的回答以来,jqGrid 的分组模块在许多部分都发生了变化。修改后的演示可以在此处找到。下面可以看到所使用的代码中最重要的部分

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;
    }
}

变量 inOnClickGroup 是在外部范围中定义的。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文