jqGrid - 保存复选框的选中状态

Question

在 jqGrid 中跨页面检查复选框会清除已选择的复选框。因此，如果我在第一页上检查了一些复选框，然后点击“下一页”转到第二页，然后返回到第一页，所选择的复选框将不再被选中。

在 jqGrid 中有没有客户端处理这个问题的方法？

- techlead

Answer 1

答案的第一部分包含了你的问题的答案。你可以在这里找到一个稍微改进过的演示版本。

如果你不需要按“multiselect”列排序，这个演示可以满足你的需求。有关该演示的一些小注释：多选框可以选择/取消选择当前页面上的所有行，但如果你想要其他行为，代码会更简单。我在演示中直接加载了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 fork of jqGrid支持multiPageSelection: true选项，可以与multiselect: true选项组合使用。它允许在多个页面上保存参数selarrrow（所选行的ID列表）。默认情况下，jqGrid在分页期间重置数组selarrrow，但在使用multiPageSelection: true, multiselect: true的情况下，则不会重置。此外，它在构建页面时预先选择来自selarrrow数组的所有行。因此，如果将selarrrow数组填满项目的所有行ID（所有页面上的所有行），则将显示所选行。用户仍然可以取消选择某些行，jqGrid不会更改用户所做的更改。

该演示是为答案创建的，展示了在free jqGrid中使用multiPageSelection: true的用法。另一个答案简要描述了free jqGrid的其他新选项：multiselectPosition: "right"，它允许将多选框列移动到右侧，multiselectPosition: "none"，它允许在没有任何多选框列的情况下使用多选功能，并且hasMultiselectCheckBox回调可以用于在jqGrid的不同行中创建多选框。

- Oleg

---

Oleg，非常感谢您！但是，我发现了一个小错误（我还没有尝试修复它，但明天会尝试）-如果您选中几个框，然后取消选中至少两个框，则这些复选框不再位于“idsOfSelectedRows”中，并且勾选的框在分页时无法保持。 - icats

另外，您是否建议我使用“idsOfSelectedRows”（如您的示例中收集的）来收集跨页面选择的所有选定行ID，以便用于发布到某些服务器操作？谢谢！ - icats

哦，抱歉，还有一件事：）。当重新加载网格（$grid.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');）时，我应该手动清除idsOfSelectedRows数组吗？还是有某种事件可以用来做这个？再次感谢:) - icats

@icats：谢谢！发布的代码有错误，现在已经修复了。关于与服务器通信的问题，这是一个好点。我认为在postData中发布idsOfSelectedRows可能会有帮助。例如像这样：postData: {selectedIds: function() { return idsOfSelectedRows.join(','); }}。如果需要清除数据重新加载网格，则必须手动重置idsOfSelectedRows数组。如果该功能在jqGrid的主要代码中，则可以自动执行此操作。在代码中任何地方执行ts.p.data = [];时，也应清除idsOfSelectedRows。感谢您的建议。 - Oleg

@MikeGledhill：我同意你的观点，但我不是jqGrid代码的所有者。我向Tony提出了许多建议，其中大部分都被接受并成为jqGrid的一部分，但有些（如持久选择）则没有。顺便说一下，你可以在jqGrid上使用idsOfSelectedRows作为新选项。如果像其他属性一样定义它（multiselect: true, idsOfSelectedRows: [], onSelectRow），你就可以在任何jqGrid回调函数（onSelectRow、onSelectAll等）中通过this.p.idsOfSelectedRows访问该属性，或者通过$(this).jqGrid("getGridParam", "idsOfSelectedRows")访问。 - Oleg