如何在 jqgrid 分组中保留 expand/collapse 状态?
how to retain expand/collapse state in jqgrid grouping?
我在分组方法中实现了一个jqgrid。默认情况下,我使用 jqgrid 的 groupCollapse:true
参数保持组折叠。我的网格运行良好,但是当我展开组并对列进行排序时,整个网格会重新加载并且不会保留列的展开状态。如何在排序时保持展开状态?
请始终写下你使用(可以使用)的jqGrid的哪个版本,以及从哪个fork(free jqGrid, commercial Guriddo jqGrid JS 或版本 <=4.7 中的旧 jqGrid)。
您的需求可以在我开发的 "free jqGrid" 中轻松实现。它允许使用 groupCollapse
作为回调函数,它是 returns 布尔值(参见 the issue)。结合 onClickGroup
回调或 jqGridGroupingClickGroup
事件,可以轻松保持分组状态。
更新: 我创建了演示 https://jsfiddle.net/92da8xhq/,它演示了如何在分组网格中保持折叠状态。下面我简要描述一下代码。该demo使用了一级分组,让代码更容易理解。
我向 jqGrid 添加了自定义 collapsedGroups: {}
参数。我们将使用参数来保存折叠组的列表。我在演示中使用 collapsedGroups: { "test2": true }
来演示我们可以在开始时创建带有一些折叠组的网格。我们不使用 collapsedGroups
对象的 属性 的值。例如 属性 test2
的存在意味着具有值 test2
的组已折叠状态。
Demo使用groupCollapse
属性 of 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;
}
}
我们在组的 expanding/collapsing 之后额外调整了自定义 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'
}
我在分组方法中实现了一个jqgrid。默认情况下,我使用 jqgrid 的 groupCollapse:true
参数保持组折叠。我的网格运行良好,但是当我展开组并对列进行排序时,整个网格会重新加载并且不会保留列的展开状态。如何在排序时保持展开状态?
请始终写下你使用(可以使用)的jqGrid的哪个版本,以及从哪个fork(free jqGrid, commercial Guriddo jqGrid JS 或版本 <=4.7 中的旧 jqGrid)。
您的需求可以在我开发的 "free jqGrid" 中轻松实现。它允许使用 groupCollapse
作为回调函数,它是 returns 布尔值(参见 the issue)。结合 onClickGroup
回调或 jqGridGroupingClickGroup
事件,可以轻松保持分组状态。
更新: 我创建了演示 https://jsfiddle.net/92da8xhq/,它演示了如何在分组网格中保持折叠状态。下面我简要描述一下代码。该demo使用了一级分组,让代码更容易理解。
我向 jqGrid 添加了自定义 collapsedGroups: {}
参数。我们将使用参数来保存折叠组的列表。我在演示中使用 collapsedGroups: { "test2": true }
来演示我们可以在开始时创建带有一些折叠组的网格。我们不使用 collapsedGroups
对象的 属性 的值。例如 属性 test2
的存在意味着具有值 test2
的组已折叠状态。
Demo使用groupCollapse
属性 of 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;
}
}
我们在组的 expanding/collapsing 之后额外调整了自定义 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'
}