如何在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 ，商业

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屋！