如何配置 jqgrid 初始加载本地数据，然后在分页、排序、过滤时切换到远程数据答案

【问题标题】：How to configure jqgrid to initially be loaded with local data, then switch to remote data on pagination, sort, filter如何配置 jqgrid 初始加载本地数据，然后在分页、排序、过滤时切换到远程数据
【发布时间】：2015-11-18 00:09:22
【问题描述】：

我希望在页面加载时使用本地 json 数据集填充 jqgrid。然后，在它加载后（gridComplete？），我想将它切换为普通的远程网格。我的示例数据集有 9 条记录，页面将与前 5 条记录一起交付给客户端。加载网格后，我想更改网格参数，以便所有后续分页、排序和过滤命令都发送到服务器。

这是我的 jsfiddle：http://jsfiddle.net/octavient/v6m27mhw/6/

这是代码，让您了解我希望实现的目标。首先，第一个问题是网格似乎认为只有五条记录，因此没有给我分页选项。

（我知道对于一些网格参数，在加载网格后设置它们需要重新加载网格，但这在这种情况下没有意义。）

<table id="tbl_test"></table>
<div id="pgr_test"></div>

//first five records are local
var obj_initial_data = { "page": 1, "total": 2, "records": 9, "rows": [
   { "id": "1", "make":"VW", "model":"Bus", "year":"1976", "color":"green" },
   { "id": "2", "make":"Ford", "model":"F150", "year":"1984", "color":"brown" },
   { "id": "3", "make":"Toyota", "model":"Camry", "year":"1989", "color":"maroon" },
   { "id": "4", "make":"VW", "model":"Passat", "year":"2003", "color":"blue" },
   { "id": "5", "make":"Toyota", "model":"Tacoma", "year":"1997", "color":"silver" }
]};

$(document).ready(function () {
    $("#tbl_test").jqGrid({
        colNames: ['id', 'Make', 'Model', 'Year', 'Color'],
        colModel: [
            {name: 'id', index: 'id', hidden:true},
            {name: 'make', index: 'make'},
            {name: 'model', index: 'model'},
            {name: 'year', index: 'year'},
            {name: 'color', index: 'color'}
        ],
        //url: '',
        pager: '#pgr_test', pgbuttons: true,
        datatype: 'local', data: obj_initial_data.rows,
        localReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false
        },
        gridview: true,
        height: 180,
        //loadonce: true,
        autowidth:true,
        //rowNum: 5,
        viewrecords: true,
        gridComplete: function () {
            //after loading the local dataset, the grid should
            //be converted to a remote grid for pagination purposes
            //the idea is that the first page of the data will be local
            //then, once the local data is loaded, the pagination 
            //will go to the server (as will sorting, filtering, etc.)
            //the url below will serve up then next four records on paginate 
            //but note that it's just hard-coded, not from a 
            //database, so filter and sort will not work--just paginate
            $("#tbl_test").jqGrid('setGridParam', {datatype:'json', url:'http://cdn.octavient.net/jqgrid/test_server.aspx'});
        }
    }); 
});

关于如何实现这一点的任何想法？

【问题讨论】：

标签： jquery json jqgrid pagination

【解决方案1】：

Guriddo 论坛上的 Tony answered my question。解决方案是使用 updatepager 方法（但不在 gridComplete 事件内部）。这是最终的（正常工作的）小提琴：http://jsfiddle.net/octavient/v6m27mhw/18/

setTimeout(function(){
    var grid = $("#tbl_test");
    grid.jqGrid('setGridParam', { records: obj_initial_data.records, lastpage: obj_initial_data.total, datatype: 'json'});
    grid[0].updatepager(false,true);
},1000);

【讨论】：