如何在 jqgrid 分组中保留展开/折叠状态? [英] how to retain expand/collapse state in jqgrid grouping?

问题描述

我已经在分组方法中实现了一个 jqgrid.默认情况下，我使用 jqgrid 的 groupCollapse:true 参数保持组折叠.我的网格运行良好，但是当我展开组并对列进行排序时，整个网格会重新加载，并且不会保留列的展开状态.排序时如何保持展开状态?

I have implemented a jqgrid in grouping method. By default I have kept the groups collapsed using groupCollapse:true parameter of jqgrid. My grid works well but When I expand the group and sort a column, the whole grid is reloaded and the expanded state of the column is not retained. How can I retain the expanded state while sorting?

推荐答案

请始终写下 jqGrid 的哪个版本，你使用(可以使用)哪个fork (免费 jqGrid，商业 Guriddo jqGrid JS 或版本 <=4.7) 中的旧 jqGrid.

Please write always which version of jqGrid, which you use (can use), and from which fork (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7).

您的要求可以在我开发的免费 jqGrid"中轻松实现.它允许使用 groupCollapse 作为回调函数，它返回布尔值(参见 问题).结合 onClickGroup 回调或 jqGridGroupingClickGroup 事件可以轻松保持分组状态.

Your requirements could be easy realized in "free jqGrid", which I develop. It allows to use groupCollapse as callback function, which returns Boolean (see the issue). In combination with onClickGroup callback or jqGridGroupingClickGroup event one can easy persist the grouping state.

更新:我创建了演示 https://jsfiddle.net/92da8xhq/，它演示了如何在分组网格中保持折叠状态.下面我简要描述一下代码.该演示使用一级分组，使代码更易于理解.

UPDATED: I created the demo https://jsfiddle.net/92da8xhq/, which demonstrates how one can persist the collapsing state in the grouping grid. Below I describe shortly the code. The demo uses one level of grouping to make the code more simple for understanding.

我向 jqGrid 添加了自定义 collapsedGroups: {} 参数.我们将使用该参数来保存折叠组的列表.我在演示中使用了 collapsedGroups: { "test2": true } 来演示我们可以在开始时创建包含一些折叠组的网格.我们不使用 collapsedGroups 对象的属性值.例如，属性 test2 的存在意味着值为 test2 的组处于折叠状态.

I added custom collapsedGroups: {} parameter to jqGrid. We will use the parameter to hold the list of collapsed groups. I used collapsedGroups: { "test2": true } in the demo to demonstrated that we can create the grid with some collapsed groups at the beginning. We don't use the value of the property of collapsedGroups object. Just the existence of the property test2 for example means that the group with the value test2 has collapsed state.

演示使用groupingView的groupCollapse属性定义为回调函数.该函数测试该组是否在折叠组列表中(具有具有某些值的 collapsedGroups 属性)

The demo uses groupCollapse property of groupingView defined as the callback function. The function tests whether the group is in the list of collapsed groups (has collapsedGroups property with some value)

groupingView: {
    groupField: ["name"],
    groupCollapse: function (options) {
        var collapsedGroups = $(this).jqGrid("getGridParam", "collapsedGroups") || {};
        // options looks like { group: number, rowid: string }
        if (collapsedGroups.hasOwnProperty(options.group.value)) {
            return true;
        }
        return false;
    }
}

我们在组展开/折叠后额外调整自定义 collapsedGroups 参数的属性.我们使用以下 onClickGroup 回调:

We adjust additionally the properties of the custom collapsedGroups parameter after expanding/collapsing of the group. We use the following onClickGroup callback:

onClickGroup: function (hid, isCollapsed) {
    var p = $(this).jqGrid("getGridParam"),
        iGroup = $(this).jqGrid("getGroupHeaderIndex", hid),
        group = p.groupingView.groups[iGroup];

    if (p.collapsedGroups == null) {
        // be sure that the custom parameter is initialized as an empty object
        p.collapsedGroups = {};
    }
    if (isCollapsed) {
        // we place group.value in the p.collapsedGroups object as a property
        if (!p.collapsedGroups.hasOwnProperty(group.value)) {
            // create the property group.value in with some value
            p.collapsedGroups[group.value] = true;
        }
    } else if (p.collapsedGroups.hasOwnProperty(group.value)) {
        // remove group.value property from the p.collapsedGroups object
        delete p.collapsedGroups[group.value];
    }
}

这篇关于如何在 jqgrid 分组中保留展开/折叠状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！