jqGrid - 保存复选框选中状态 [英] jqGrid - saving checkbox selected state

问题描述

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

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

解决方案

第一部分答案包含您问题的答案.您可以在这里找到该演示的一些改进版本..p>

如果您不需要按多选"列排序演示 做你需要的.关于演示的一些小说明:多选"列上的复选框仅在当前页面上选择/取消选择所有行.如果你想要另一种行为，代码会更简单.我通过加载网格直接包含在 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);//从列表中删除 id} else if (index < 0) {idsOfSelectedRows.push(id);}};//初始化选择idsOfSelectedRows = ["8", "9", "10"];$grid.jqGrid({数据类型:'本地'，//... 其他参数多选:真，onSelectRow: updateIdsOfSelectedRows,onSelectAll:函数(aRowids，isSelected){变量我，计数，ID；for (i = 0, count = aRowids.length; i < count; i++) {id = aRowids[i];updateIdsOfSelectedRows(id, isSelected);}},加载完成:函数(){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 数组中预选所有行.因此，如果使用项目的所有 rowid(所有页面上的所有行)填充 selarrrow 数组，则将显示选中的行.用户仍然可以取消选择某些行，jqGrid 不会更改用户所做的更改.

演示，为 答案，展示了multiPageSelection: true在免费jqGrid中的用法.Another answer 简要介绍了免费 jqGrid 的其他新选项:multiselectPosition: "right"，它允许将多选复选框的列向右移动，multiselectPosition: "none"，允许在没有任何多选列的情况下使用多选功能和hasMultiselectCheckBox回调，可用于创建多选复选框不在 jqGrid 的所有行中.

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.

Is there a way in jqgrid to handle this on the client side?

解决方案

The first part of the answer contain 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 demo do 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"];

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 idsOfSelectedRows as an additional parameter of jqGrid. Currently there are no validation of jqGrid parameters and you can extend there. The advantage will be persistence of idsOfSelectedRows together with the corresponding jqGrid.

UPDATED: Free jqGrid fork of jqGrid supports multiPageSelection: true option which can be combined with multiselect: true option. It allows to hold the parameter selarrrow (the list of ids of selected rows) over many pages. By default jqGrid reset the array selarrrow during paging, but in case of usage multiPageSelection: true, multiselect: true it doesn't so resetting. Moreover it preselects all rows from selarrrow array during the building the page. Thus if one fills selarrrow array 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.

The demo, created for the answer, shows the usage of multiPageSelection: true in free jqGrid. Another answer describes 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 hasMultiselectCheckBox callback, which can be used to create multiselect checkboxes not in all rows of jqGrid.

这篇关于jqGrid - 保存复选框选中状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！