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

Question

我使用这个代码：

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

我所试图做的是从服务器返回结果的一个子集（在这里我刚才硬编码它们），我想通过指定页面和总数来模拟分页，并将它们显示在表格中。

表生成并知道行（它创建行和我的表扩展到正确的高度），但单元格为空。

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

此外，如果jsonReader: { repeatitems: false },丢失或设置为true，然后我得到一个错误：

TypeError: obj is undefined 

这是一个错误？不知道我是否做错了什么。

是否有人知道如何解决（至少可以重现）这个问题？在FF和Chrome上进行测试。

感谢

UPDATE：问题的

，一部分是固定的（克里斯的答案），我现在可以看到表中的数据。通过更改colModel中的名称标签来修复。

但仍存在一些突出问题：

1. 的总页面数仍呈现为1，所以我看“第5页1”我想让它显示“第5页16”
2. 总记录数显示为25还是让笔者看到了“101 - 125 25”时，我想看看101 - 125 400“
3. 还有错误设置repeatitems: true

我当假设fi前两个问题是相关的。

Answer 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" }, 
         ], 

Answer 2

这是你的你的看法/网页中的网格定义

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> 

那么你应该定义从服务器获取数据的方法，在上面的格子，我们做出的网址主页/ 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); 
    }