jqgrid在使用loadonce时无法实现分页：true

Question

当我使用“loadonce”设置为“true”时，我的问题是搜索或过滤工作，但分页不起作用。如果我将 loadonce 更改为 false，searchong 不能工作，但分页工作。

如何确保仅在分页期间将数据类型设置为 json。

    $grid = $("#list"),

    numberTemplate = {
        formatter: 'number',
        align: 'right',
        sorttype: 'number',
        editrules: {
            number: true,
            required: true
        },

        searchoptions: {
            sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']
        }
    };
var myDelOptions = {

    onclickSubmit: function (rp_ge, rowid) {
        // we can use onclickSubmit function as "onclick" on "Delete" button
        // alert("The row with rowid="+rowid+" will be deleted");

        // delete row
        grid.delRowData(rowid);
        $("#delmod" + grid[0].id).hide();

        if (grid[0].p.lastpage > 1) {
            // reload grid to make the row from the next page visable.
            // TODO: deleting the last row from the last page which number is higher as 1
            grid.trigger("reloadGrid", [{
                page: grid[0].p.page
            }]);
        }

        return true;
    },
    processing: true
};

$.extend($.jgrid.inlineEdit, {
    keys: true
});
$grid.jqGrid({
    url: $('#contextPath').val() +"/globalcodes/getList?masterCodeSysid="+$('#Sysid').val(),        
    datatype: 'json',
    colNames: ['Sequence', 'Detail Code', 'Code Description', 'Status', 'Cross Referrences', '', ''],
    colModel: [ {
                    name: 'seqNumber',
                    width: 50,
                    editable: false,
                    search:true


                }, {
                    name: 'dtlCode',
                    width: 50,
                    editable: true,
                    searchoptions:{sopt:['cn','eq','ne']}   
                }, {
                    name: 'codeDesc',
                    width: 200  ,
                    searchoptions:{sopt:['cn','eq','ne']}   
                }, {
                    name: 'statusFlag',
                    width: 150,
                    edittype:"select",
                    formatter : 'select',
                    editoptions:{value:"Y:Active;N:Inactive"},
                    searchoptions:{sopt:['cn','eq','ne']}   
                }, {
                    name: 'crossReferrenced',
                    width: 100,
                    editable: false,
                    searchoptions:{sopt:['cn','eq','ne']}   
                },{
                    name: 'act',
                    index: 'act',
                    width: 55,
                    align: 'center',
                    search: false,
                    sortable: false,
                    formatter: 'actions',
                    searchoptions:{sopt:['cn','eq','ne']}   ,
                    editable: false,
                    formatoptions: {
                        keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
                        onEdit: function (rowid) {
                            $('#add_detail_code').attr('disabled','disabled').addClass("btnDisabled").removeClass("btnNormalInactive");
                        },
                        onSuccess: function (jqXHR) {
                            $grid.setGridParam({ rowNum: 10 }).trigger('reloadGrid');
                        },
                        afterSave: function (rowid) {                               
                            $('#add_detail_code').removeAttr('disabled').addClass("btnNormalInactive").removeClass("btnDisabled");
                        },
                        afterRestore: function (rowid) {                                
                            $('#add_detail_code').removeAttr('disabled').addClass("btnNormalInactive").removeClass("btnDisabled");
                        },
                        delOptions: myDelOptions
                    }
    },{
        name: 'dtlCodeSysid',
        hidden: true
    }],

    cmTemplate: {
        editable: true
    },
    jsonReader: {id:'dtlCodeSysid',
        },
    rowList: [5, 10, 20],
    pager: '#detailCodePager',
    gridview: true,             
    ignoreCase: true,
    rowNum:10,
    rownumbers: false,
    sortname: 'col1',
    loadonce:true,
    viewrecords: true,
    sortorder: 'asc',
    height: '100%',
    deepempty: true,
    editurl: $('#contextPath').val() +"/globalcodes/saveMasterCodeDetails?masterCodeSysId="+$('#masterCodeSysid').val(),    
    //caption: 'Usage of inlineNav for inline editing',
});
$grid.jqGrid('filterToolbar', {
    searchOperators: true
});

$grid.jqGrid('navGrid', '#detailCodePager', {
    add: false,
    edit: false,
    del: false,
    search:false, 
    refresh:true
});

Answer 1

您没有发布任何您使用的代码，所以我尝试猜测。可能您在服务器端实现了分页，并且在使用loadonce: true 选项的情况下仅返回一页数据。在服务器端正确使用loadonce: true 将返回所有数据，数据只需根据jqGrid 发送的排序参数正确排序即可。顺便说一句，从服务器返回的数据格式可能只是项目数组，而不是在{ "total": "xxx", "page": "yyy", "records": "zzz", "rows" : [...]} 中包装结果。如果使用loadonce: true 选项，来自total、page 和records 的数据将被忽略并根据数组返回数据的大小进行计算。