jQuery jqGrid - 保存复选框选中状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8172186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid - saving checkbox selected state
提问by techlead
Checking checkboxes across pages in jqGrid wipes out the selected checkboxes. So, if I check some checkboxes on page 1 and then click Next to go to page 2 and then come back to page 1, the selected checkboxes are no longer checked.
在 jqGrid 中跨页面检查复选框会清除选定的复选框。因此，如果我选中第 1 页上的某些复选框，然后单击下一步转到第 2 页，然后返回第 1 页，则不再选中选定的复选框。
Is there a way in jqgrid to handle this on the client side?
jqgrid 有没有办法在客户端处理这个问题？
回答by Oleg
The first part of the answercontain the answer on your question. A little improved version of the demo you can find here.
答案的第一部分包含您的问题的答案。您可以在此处找到演示的一些改进版本。
If you don't need to sort by "multiselect" column the demodo what you need. Some small remarks about the demo: The checkbox over the "multiselect" column select/unselect all rows only on the current page. If you want another behavior, the code will be even more simple. I included in the demo selection of 3 items directly by loading the grid. Two items will be selected on the first page and one item on the second page. In some situation the behavior can be interesting. If you don't need this you should just comment the line idsOfSelectedRows = ["8", "9", "10"];
如果您不需要按“多选”列排序，则演示会执行您需要的操作。关于演示的一些小评论：“多选”列上的复选框仅选择/取消选择当前页面上的所有行。如果你想要另一种行为，代码会更简单。我通过加载网格直接包含在 3 个项目的演示选择中。将在第一页上选择两个项目，在第二页上选择一个项目。在某些情况下，这种行为可能很有趣。如果您不需要这个，您应该只注释该行idsOfSelectedRows = ["8", "9", "10"];
Below you will find the most important parts of the code of the demo
您将在下面找到演示代码中最重要的部分
var $grid = $("#list"), idsOfSelectedRows = [],
updateIdsOfSelectedRows = function (id, isSelected) {
var index = $.inArray(id, idsOfSelectedRows);
if (!isSelected && index >= 0) {
idsOfSelectedRows.splice(index, 1); // remove id from the list
} else if (index < 0) {
idsOfSelectedRows.push(id);
}
};
// initialize selection
idsOfSelectedRows = ["8", "9", "10"];
$grid.jqGrid({
datatype: 'local',
// ... other parameters
multiselect: true,
onSelectRow: updateIdsOfSelectedRows,
onSelectAll: function (aRowids, isSelected) {
var i, count, id;
for (i = 0, count = aRowids.length; i < count; i++) {
id = aRowids[i];
updateIdsOfSelectedRows(id, isSelected);
}
},
loadComplete: function () {
var $this = $(this), i, count;
for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
$this.jqGrid('setSelection', idsOfSelectedRows[i], false);
}
}
});
If you want you can consider to hold idsOfSelectedRowsas an additional parameter of jqGrid. Currently there are no validation of jqGrid parameters and you can extend there. The advantage will be persistence of idsOfSelectedRowstogether with the corresponding jqGrid.
如果您愿意，可以考虑将其idsOfSelectedRows作为 jqGrid 的附加参数。目前没有对 jqGrid 参数的验证，您可以在那里扩展。优点将是idsOfSelectedRows与相应的 jqGrid 一起持久化。
UPDATED:Free jqGridfork of jqGrid supports multiPageSelection: trueoption which can be combined with multiselect: trueoption. It allows to hold the parameter selarrrow(the list of ids of selected rows) over many pages. By default jqGrid reset the array selarrrowduring paging, but in case of usage multiPageSelection: true, multiselect: trueit doesn't so resetting. Moreover it preselects all rows from selarrrowarray during the building the page. Thus if one fills selarrrowarray with all rowids of the items (all rows over all pages) then the rows will be displayed selected. The user still can deselect some rows and jqGrid will not change the changes made by the user.
更新：jqGrid 的免费 jqGrid分支支持multiPageSelection: true可以与multiselect: true选项结合的选项。它允许selarrrow在多个页面上保存参数（所选行的 id 列表）。默认情况下 jqGridselarrrow在分页期间重置数组，但在使用的情况下multiPageSelection: true, multiselect: true它不会重置。此外，它selarrrow在构建页面期间从数组中预选所有行。因此，如果selarrrow用项目的所有 rowid（所有页面上的所有行）填充数组，则将显示选中的行。用户仍然可以取消选择某些行，jqGrid 不会更改用户所做的更改。
The demo, created for the answer, shows the usage of multiPageSelection: truein free jqGrid. Another answerdescribes shortly other new options of free jqGrid: multiselectPosition: "right", which allows to move the column of multiselect checkboxes to the right, multiselectPosition: "none", which allows use multiselect functionality without any multiselect column and hasMultiselectCheckBoxcallback, which can be used to create multiselect checkboxes not in all rows of jqGrid.
为答案创建的演示显示了multiPageSelection: true免费 jqGrid中的用法。另一个答案很快描述了免费 jqGrid: 的其他新选项multiselectPosition: "right"，它允许将多选复选框的列向右移动multiselectPosition: "none"，这允许使用多选功能而无需任何多选列和hasMultiselectCheckBox回调，可用于创建并非在所有行中的多选复选框jqGrid的。
