我正在使用此代码:
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中的名称标签来修复。
然而,仍有一些悬而未决的问题:
repeatitems: true
我认为前两个问题是相互关联的。
答案 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);
}