Question

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

在更改页面或进行搜索（工具栏或过滤器）后，所选项目将保持选择（并向用户呈现）
当选择全部选择按钮时，如果当前页面上没有选择任何项目，则会全部选择它们。如果已经选择了某个项目，它将清除整个列表，无论是否在页面上。
单击“发票打印”按钮时，它将使用已创建的ID列表，或创建已选择的所有IDS列表，无论是否在当前显示中。

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

可以肯定的是，我对js知之甚少，但这里有一些我试过的事情并不成功：

此answer建议使用onSelectRow和onSelectAll，但我无法实现。 see fail
This看起来很有希望，但只能解决分页问题。所以＃1看起来像一个首选的路线。 pastebin for question #2

P.S。回到了解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);
                    }
                }
            });

在分页，工具栏搜索或过滤器后，使jqGrid多选选择保持不变

1 个答案: