javascript - 使 jqGrid 多选选择在分页、工具栏搜索或过滤后持续存在

Question

我有这个jqGrid。以下是我想要的行为：

1. 更改页面或进行搜索（工具栏或过滤器）后，所选项目将保持选择（并呈现给用户）

2. 当全选按钮被选中时，如果当前页面上没有项目被选中，则全选。如果已经选择了一个项目，它将清除整个列表，无论是否在页面上。

3. 单击“发票打印”按钮时，它将使用我们创建的 ID 列表，或者创建所有已选择的 IDS 的列表，无论是否在当前显示中。

如果不支持过滤器是可以接受的，但首选。

---

可以肯定的是，我对 js 知之甚少，但这里有一些我尝试过的东西，但效果好坏参半：

1. 这个答案建议使用 onSelectRow 和 onSelectAll，但我无法实现。 见失败

2. 这看起来很有希望，但只会解决分页问题。所以#1 看起来是首选路线。 问题 #2 的 pastebin

---

PS回到对js知之甚少的地方。在我的项目中，函数 select_ids 的警报和未显示功能确实有效，但不确定为什么它没有在 jsfiddle 中显示警报。很抱歉，它需要修复，但布朗尼指出，但是发布了分叉修复。

grid.jqGrid({
            datatype: "local",
            data: mydata,
            colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
            colModel:[
                {name:'id',index:'id', key: true, width:70, sorttype:"int"},
                {name:'invdate',index:'invdate', width:90, sorttype:"date"},
                {name:'name',index:'name', width:100},
                {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
                {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                {name:'note',index:'note', width:150, sortable:false}
            ],
            search:true,
            pager:'#pager',
            jsonReader: {cell:""},
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'id',
            sortorder: 'asc',
            viewrecords: true,
            multiSort: true, 
            multiselect: true, 

            height: "100%",
            caption: "Invoice Print"
        });
        grid.jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:true,refresh:true},
                    {},{},{},{multipleSearch:true, multipleGroup:true, showQuery: true});
        grid.jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false, defaultSearch:"cn"});

Answer 1

这是脚本。onSelectAll并onSelectRow允许保存恢复的状态gridComplete

$(function () {

            var selectedRows = {};
            var agentsGrid = $('#agentsTbl');
            agentsGrid.jqGrid({
                height: 400,
                datatype: 'local',
                multiselect: true,
                ignoreCase: true,
                colNames: [
                    'isn', 'Agent', 'Type', 'Country', 'Plan', 'Date To'],
                colModel: [
                    { name: 'isn', index: 'isn', hidden: true, key: true, align: 'center' },
                    { name: 'agentName', index: 'agentName', align: 'center', search: true, stype: 'text', searchoptions: { sopt: ['cn'] } },
                    { name: 'agentType', index: 'agentType', hidden: true },
                    { name: 'country', index: 'country', align: 'center', search: true, width: 100, fixed: true },
                    { name: 'scheme', index: 'scheme', align: 'center', search: true, stype: 'text', searchoptions: { sopt: ['cn'] } },
                    { name: 'dateTo', index: 'dateTo', align: 'center', search: false }
                ],
                grouping: true,
                groupingView: {
                    groupField: ['agentType'],
                    groupDataSorted: true,
                    groupColumnShow: false
                },
                // to save selection state
                onSelectAll: function (rowIds, status) {
                    if (status === true) {
                        for (var i = 0; i < rowIds.length; i++) {
                            selectedRows[rowIds[i]] = true;
                        }
                    } else {
                        for (var i = 0; i < rowIds.length; i++) {
                            delete selectedRows[rowIds[i]];
                        }
                    }
                },
                onSelectRow: function (rowId, status, e) {
                    if (status === false) {
                        delete selectedRows[rowId];
                    } else {
                        selectedRows[rowId] = status;
                    }

                },
                gridComplete: function () {
                    for (var rowId in selectedRows) {
                        agentsGrid.setSelection(rowId, true);
                    }
                }
            });