Jqgrid & 渐进式增强：成功从 HTML 到本地 JSON，再到远程 JSON，但寻呼机无法正确启动？

Question

看看我的小提琴发生了什么：http://jsfiddle.net/tbH5H/

我正在尝试使用 jgrid 实现适当的渐进式增强。一切都很好，除了我不知道如何在第一次加载时为 jqgrid 提供正确的寻呼机信息。我的服务器端脚本转储 SEO 机器人的 JSON 和相应的 HTML 表。但是，如何在第一次本地加载时向 jqgrid 提供正确的总页数呢？寻呼机在远程数据拉取后工作正常，如您在小提琴中看到的那样。

.HTML

<table id="grid">
    <tr><th>ID</th><th>State</th></tr>
    <tr><td>1</td><td>Alaska</td></tr>
    <!-- etc...server side script dumps this out for SEO... -->
</table>
<div id="pager"></div>  

.JS

$("#grid").jqGrid({
    datatype:'local',
    // Server side script dumps this JSON out for first load only, 
    // other requests will come from remote source, see further down...
    data: [{"id":1,"state":"Alabama"},
           {"id":2,"state":"Alaska"},
           {"id":3,"state":"Arizona"},
           {"id":4,"state":"Arkansas"},
           {"id":5,"state":"California"},
           {"id":6,"state":"Colorado"},
           {"id":7,"state":"Connecticut"},
           {"id":8,"state":"Delaware"},
           {"id":9,"state":"Florida"},
           {"id":10,"state":"Georgia"}],  
    height: 250,
    width: 450,
    rowNum:10,
    colNames:['ID','State'],
    colModel:[
       {name:'id',    index:'id',    width:50},
       {name:'state', index:'state', width:100}
    ],
    caption: "States of the USA",
    pager: '#pager'
});
$("#grid").jqGrid('navGrid', '#pager',{edit: false, add: false, del: false, search: false, refresh: true});         
   // Convert the grid to read remotely, but don't trigger a unnecessary reload...
   // (because queries are expensive! We shouldn't need to run them twice!)
   $('#grid').jqGrid("setGridParam",{datatype:"json", mtype:"POST", url:"/some/url/here"});
   $('#grid').jqGrid("setGridParam",{postData:data});

Answer 1

知道了！

我需要使用localReader.查看新小提琴：http://jsfiddle.net/2UCk6/

localReader: {
    // These values would be inserted on first page load from server-side script
    page: function(obj) { return 1; },
    total: function(obj) { return 5; }, 
    records: function(obj) { return 50; }
},

Answer 2

您的数据应采用以下格式：

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [{"id":1,"state":"Alabama"},
       {"id":2,"state":"Alaska"},
       {"id":3,"state":"Arizona"},
       {"id":4,"state":"Arkansas"},
       {"id":5,"state":"California"},
       {"id":6,"state":"Colorado"},
       {"id":7,"state":"Connecticut"},
       {"id":8,"state":"Delaware"},
       {"id":9,"state":"Florida"},
       {"id":10,"state":"Georgia"}]
}

哪里：

total   =  total pages for the query
page    = current page of the query
records = total number of records for the query
rows    = an array that contains the actual data

您需要为上述内容配置json读取器，如下所示：

 jsonReader : {
     root: "rows",
     page: "page",
     total: "total",
     records: "records",
     repeatitems: false,
     cell: "cell",
     ...
   },
...

更多信息可以在这里找到 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

更新

当数据类型为本地时，不能具有该功能。当数据类型为本地数据类型时，Jqgird 会忽略页面/记录等。您可能应该尝试虚拟滚动 -> 转到 Jqgrid 演示 -> 3.7 中的新功能 -> 虚拟滚动。

或者您可能应该进行服务器调用并返回您打算用作页面/记录等本地的数据？