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

问题描述

在jqGrid中的多个页面之间选中复选框将清除所选的复选框.因此，如果我在第1页上选中了某些复选框，然后单击下一步"转到第2页，然后又回到第1页，则不再选中选中的复选框.

jqgrid中是否可以在客户端处理此问题?

解决方案

此处中找到该演示的改进版本... >

如果您不需要按"multiselect"列进行排序演示做您需要的事情.关于演示的一些小注释:"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的持久性.

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

为演示 "https://stackoverflow.com/a/33021115/315935>答案显示了multiPageSelection: true在免费jqGrid中的用法. 另一个答案简要介绍了免费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屋！