Question

我想在页面加载时使用本地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'});
        }
    }); 
});

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

Answer 1

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

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

1 个答案: