jqGrid - 保存复选框选中状态

tec*_*ead 10 jquery jqgrid

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

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

Ole*_*leg 16

答案的第一部分包含您问题的答案.您可以在此处找到一个小改进的演示版本.

如果您不需要按"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);
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

如果你想要,你可以考虑保持idsOfSelectedRows作为jqGrid的附加参数.目前没有jqGrid参数的验证,你可以在那里扩展.优点是idsOfSelectedRows与相应的jqGrid一起持久化.

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

答案创建的演示显示了multiPageSelection: true免费jqGrid 的用法.另一个答案很快描述了免费jqGrid的其他新选项:multiselectPosition: "right"它允许将多选复选框的列移动到右侧multiselectPosition: "none",这允许使用多选功能而无需任何多选列和hasMultiselectCheckBox回调,这可用于创建不在所有行中的多选复选框jqGrid.

  • 另外,您是否建议我使用'idsOfSelectedRows'(在您的示例中收集)来收集页面中所有选定的行ID以用于发布到某些服务器操作?谢谢!! (2认同)
  • 哦,对不起,还有一件事:).当重新加载网格(`$ grid.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');`)时,我应该手动清除idsOfSelectedRows数组吗?或者我可以使用某种事件来做这件事吗?再次感谢 :) (2认同)