jquery - jqGrid - 保存复选框选定状态

Question

在 jqGrid 中跨页面检查复选框会清除选定的复选框。因此，如果我选中第 1 页上的某些复选框，然后单击“下一步”转到第 2 页，然后返回第 1 页，则不再选中所选复选框。

jqgrid 有没有办法在客户端处理这个问题？

Answer 1

the answer的第一部分包含您问题的答案。您可以找到该演示的稍微改进版本 here .

如果不需要按“多选”列排序 the demo做你需要做的事。关于演示的一些小注释:“多选”列上的复选框仅选择/取消选择当前页面上的所有行。如果您想要其他行为，代码会更简单。我通过加载网格直接将 3 个项目包含在演示选择中。将在第一页上选择两个项目，在第二页上选择一个项目。在某些情况下，行为可能很有趣。如果您不需要这个，您只需注释行 idsOfSelectedRows = ["8", "9", "10"];

下面您将找到演示代码中最重要的部分

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

如果您愿意，可以考虑将 idsOfSelectedRows 作为 jqGrid 的附加参数。目前没有 jqGrid 参数的验证，您可以在那里扩展。优点是 idsOfSelectedRows 与相应的 jqGrid 一起持久存在。

更新: Free jqGrid jqGrid 的 fork 支持 multiPageSelection: true 选项，可以与 multiselect: true 选项结合使用。它允许在多个页面上保存参数selarrrow(所选行的 ID 列表)。默认情况下，jqGrid 在分页期间重置数组 selarrrow，但在使用 multiPageSelection: true, multiselect: true 的情况下，它不会重置。此外，它在构建页面期间预先选择 selarrrow 数组中的所有行。因此，如果用项目的所有 rowid(所有页面上的所有行)填充 selarrrow 数组，那么这些行将显示为选中状态。用户仍然可以取消选择某些行，jqGrid 不会更改用户所做的更改。

The demo ，为 the answer 创建，显示了免费 jqGrid 中 multiPageSelection: true 的用法。 Another answer简短地描述了免费 jqGrid 的其他新选项:multiselectPosition: "right"，它允许将多选复选框的列移动到右侧，multiselectPosition: "none"，它允许使用多选功能，无需任何多选列和 hasMultiselectCheckBox 回调，可用于创建不在 jqGrid 的所有行中的多选复选框。