如何配置jqgrid最初加载本地数据，然后切换到分页，排序，过滤远程数据

Question

我想要一个jqgrid填充页面加载本地json数据集。然后，在它加载（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'}); 
     } 
    }); 
}); 

如何实现任何想法这个？

Answer 1

托尼answered my question在Guriddo论坛上。解决方案是使用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);