0

我正在使用这段代码:

    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),所以我看到“第 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 回答 2

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" },
                        ],
于 2013-02-28T10:20:52.103 回答
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);
    }
于 2013-02-28T16:45:04.073 回答