杰格里德逐步增强:已成功从HTML升级到本地JSON，再到远程JSON，但是寻呼机无法正确启动? [英] Jqgrid & progressive enhancement: Successfully progresses from HTML, to local JSON, to remote JSON, but pager doesn't start correctly?

问题描述

在这里查看我的小提琴发生了什么: http://jsfiddle.net/tbH5H/

Take a look at what happens in my fiddle here: http://jsfiddle.net/tbH5H/

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

I'm trying to achieve proper progressive enhancement using jgrid. Everything works great, except I don't know how to give jqgrid the correct pager information on first load. My server side script dumps the JSON and a corresponding HTML table for SEO bots. But how can I also give the correct total page count to jqgrid on this first local load? The pager works correctly after a remote data pull as you can see in the fiddle.

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});

推荐答案

知道了！

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

I needed to use localReader. See new fiddle: 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; }
},

这篇关于杰格里德逐步增强:已成功从HTML升级到本地JSON，再到远程JSON，但是寻呼机无法正确启动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！