如何在jqgrid分组中保留展开/折叠状态？

Posted 2021-04-19

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

答案

请始终写下您使用（可以使用）的jqGrid版本，以及哪个版本（free jqGrid，商业Guriddo jqGrid JS或版本<= 4.7中的旧jqGrid）。

我开发的“免费jqGrid”可以很容易地实现您的要求。它允许使用groupCollapse作为回调函数，它返回Boolean（参见the issue）。结合onClickGroup回调或jqGridGroupingClickGroup事件，可以轻松地保持分组状态。

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

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

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

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回调：

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

另一答案

groupingView: {
    groupCollapse: true,
            groupField: ["name"],
            plusicon: 'ace-icon fa fa-plus-square purple',
            minusicon: 'ace-icon fa fa-edit red'
}