jqGrid - 服务器端分页 - jsonstring - 显示不正确/无数据

时间:2013-02-27 09:59:32

标签: json jqgrid

我正在使用此代码:

    var data = {
            colModel: [
                    { name: 'ID', index: 'id', width: "80" },
                    { name: 'Name', index: 'name', width: "300" },
                    { name: 'Value 1', index: 'value1', width: "110" },
                    { name: 'Value 2', index: 'value2', width: "110" },
                ],
                pager: instance.getPager().attr("id"),
                datatype: "jsonstring",
                datastr: {
                    "page": "5",
                    "total": "16",
                    "records": "400",
                    "rows": [
                          {
                           "id": 0,
                           "name": "name0",
                           "value1": 61,
                           "value2": 81
                       },
                       {
                           "id": 1,
                           "name": "name1",
                           "value1": 91,
                           "value2": 48
                       },
                       {
                           "id": 2,
                           "name": "name2",
                           "value1": 65,
                           "value2": 41
                       },
                       {
                           "id": 3,
                           "name": "name3",
                           "value1": 20,
                           "value2": 49
                       },
                       {
                           "id": 4,
                           "name": "name4",
                           "value1": 34,
                           "value2": 91
                       },
                       {
                           "id": 5,
                           "name": "name5",
                           "value1": 80,
                           "value2": 31
                       },
                       {
                           "id": 6,
                           "name": "name6",
                           "value1": 9,
                           "value2": 37
                       },
                       {
                           "id": 7,
                           "name": "name7",
                           "value1": 41,
                           "value2": 14
                       },
                       {
                           "id": 8,
                           "name": "name8",
                           "value1": 10,
                           "value2": 85
                       },
                       {
                           "id": 9,
                           "name": "name9",
                           "value1": 21,
                           "value2": 9
                       },
                       {
                           "id": 10,
                           "name": "name10",
                           "value1": 67,
                           "value2": 55
                       },
                       {
                           "id": 11,
                           "name": "name11",
                           "value1": 50,
                           "value2": 23
                       },
                       {
                           "id": 12,
                           "name": "name12",
                           "value1": 11,
                           "value2": 92
                       },
                       {
                           "id": 13,
                           "name": "name13",
                           "value1": 52,
                           "value2": 54
                       },
                       {
                           "id": 14,
                           "name": "name14",
                           "value1": 55,
                           "value2": 94
                       },
                       {
                           "id": 15,
                           "name": "name15",
                           "value1": 23,
                           "value2": 98
                       },
                       {
                           "id": 16,
                           "name": "name16",
                           "value1": 5,
                           "value2": 69
                       },
                       {
                           "id": 17,
                           "name": "name17",
                           "value1": 19,
                           "value2": 19
                       },
                       {
                           "id": 18,
                           "name": "name18",
                           "value1": 38,
                           "value2": 60
                       },
                       {
                           "id": 19,
                           "name": "name19",
                           "value1": 21,
                           "value2": 78
                       },
                       {
                           "id": 20,
                           "name": "name20",
                           "value1": 22,
                           "value2": 52
                       },
                       {
                           "id": 21,
                           "name": "name21",
                           "value1": 63,
                           "value2": 33
                       },
                       {
                           "id": 22,
                           "name": "name22",
                           "value1": 51,
                           "value2": 13
                       },
                       {
                           "id": 23,
                           "name": "name23",
                           "value1": 51,
                           "value2": 83
                       },
                       {
                           "id": 24,
                           "name": "name24",
                           "value1": 82,
                           "value2": 13
                       }
                   ]
                },
                jsonReader: { repeatitems: false },
                rowNum: 25,
                viewrecords: true,
                caption: "Packages",
                height: "auto",
                ignoreCase: true
    }; 
    console.log(JSON.stringify(data));
    instance.getContainer().jqGrid(data);

我要做的是从服务器返回一个结果的子集(这里我刚刚将它们硬编码),我想通过指定页面和总数来模拟分页,并将它们显示在表格中。< / p>

生成表并且它知道行(它创建行,我的表扩展到正确的高度),但是单元格是空白的。

此外,寻呼号码并不像我预期的那样,我希望的总页数和记录分别是16和400,它们不是,它们匹配数据(1和25),所以我看到'第5页1'和'101-125 of 25'。

如果jsonReader: { repeatitems: false },缺失或设置为true,那么我会收到错误:

TypeError: obj is undefined

这是一个错误吗?不确定我是否做错了。

有没有人知道如何修复(至少可以重现)这个问题?在FF和Chrome中都进行了测试。

由于

更新

问题的一部分是固定的(Kris回答),我现在可以看到表中的数据。通过更改colModel中的名称标签来修复。

然而,仍有一些悬而未决的问题:

  1. 总页数仍显示为1,因此我看到“第5页,共1页”我希望它显示“第5页,共16页”
  2. 记录总数仍显示为25,所以当我想看到'101 - 125 of 400'时,我会看到'101 - 125 of 25'
  3. 设置repeatitems: true
  4. 时仍然存在错误

    我认为前两个问题是相互关联的。

2 个答案:

答案 0 :(得分:1)

你在colModel中有一些命名问题(colModel中的名称应该与json中的键完全相同)

更改

colModel: [
                { name: 'ID', index: 'id', width: "80" },
                { name: 'Name', index: 'name', width: "300" },
                { name: 'Value 1', index: 'value1', width: "110" },
                { name: 'Value 2', index: 'value2', width: "110" },
            ],

 colModel: [
                            { name: 'id', index: 'id', width: "80" },
                            { name: 'name', index: 'name', width: "300" },
                            { name: 'value1', index: 'value1', width: "110" },
                            { name: 'value2', index: 'value2', width: "110" },
                        ],

答案 1 :(得分:0)

这是你的视图/ html页面中的网格定义

    jQuery(document).ready(function() {
    jQuery("#list").jqGrid({
        url: '/Home/DynamicGridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['id', 'name', 'value1', 'value2'],
        colModel: [
                { name: 'ID', index: 'id', width: "80" },
                { name: 'Name', index: 'name', width: "300" },
                { name: 'Value 1', index: 'value1', width: "110" },
                { name: 'Value 2', index: 'value2', width: "110" },
            ],
        pager: jQuery('#pager'),
        rowList: [5, 10, 20, 50],
        jsonReader: { repeatitems: false },
            rowNum: 25,
            viewrecords: true,
            caption: "Packages",
            height: "auto",
            ignoreCase: true
    }).navGrid('#pager', { edit: false, add: false, del: false, refresh: false, search: true });

});

 <table id="list"></table>
 <div id="pager"></div>

然后你应该定义一个从服务器检索数据的方法,在上面的网格中我们调用url Home / DynamicGridData,这里是定义和分页逻辑

    public ActionResult DynamicGridData(string sidx, string sord, int page, int rows)
    {
        var context = new AdvItemsContext();
        int pageIndex = Convert.ToInt32(page) - 1;
        int pageSize = rows; //this gets you the page size
        int totalRecords = context.db.Count(); //this gets you the totalrecords
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize); //this math get the tota pages avaiable

        var dbdata = context.db.ToList().Skip(pageIndex * pageSize).Take(pageSize);// this lets you page through the records

        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = new[] {
            new {id=0,cell=new[]{"0","name0","61","81"}},
            new {id=1,cell=new[]{"1","name1","91","48"}},
            new {id=2,cell=new[]{"0","name2","65","41"}},
            // all your other values or better yet get this from server
        }
        };
        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }