我的 jQgrid 不显示 json 数据

Question

我是 jQgrid 和 jQuery 的新手。我想在我的 jQgrid 中显示 JSON 数据。但是我的代码没有显示来自服务器的 JSON 数据，而且我对此也没有任何错误。我的代码哪里出错了？？

从服务器端，JSON 字符串的格式为（来自预览窗口）

d: {__type:iReg.JQGrid, page:1, total:20, records:194, rows:[,…]}
 __type: "iReg.JQGrid"
 page: 1
 records: 194
 rows: [,…]
 0: {id:0000a8c4-82b8-4ad6-a122-00938307e269, cell:[AIPRIORITY, Medium, Medium priority for action item]}
 1: {id:880a2441-e0db-4cda-978c-01387c969df6, cell:[CITY, Noida, U.P.]}
 2: {id:9d39f81e-a524-49e8-a0b5-09a865533913, cell:[DESIGNATION, Sales Engineer, Sales         Engineer]}
 3: {id:57a36caa-01f8-489f-b469-0a803d25c1c6, cell:[DOCUMENT_CATEGORY, Acceptance Note, Acceptance Note]}
 4: {id:aa7857a7-de94-42bf-8075-0ab3d3d65bf1, cell:[EXPENSE_SUBTYPE, Stationary, Stationary]}
 5: {id:b0ab6cd8-4e21-4350-8970-03cd4aaa6d61, cell:[EXPENSE_SUBTYPE, Food, Food]}
 6: {id:14ba5274-e60d-441a-887b-0a999f5a4e4c, cell:[ITEMPROCESS_STEP, Blend, Blending Process]}
 7: {id:e67284f7-4f42-456b-b1a9-04cabaf77305, cell:[ORDERSTATUS, Pending, Pending - Default status]}
 8: {id:88170912-1b2a-441f-9002-0be93e0bcd8f, cell:[ORDERTYPE, Development, Development order]}
 9: {id:560013cb-9c86-4471-8379-031cea98c507, cell:[TENDERSTATUS, Won - PO Received, Won - PO Received]}
 total: 20

而我的 jQgrid 初始化代码是：

var oItemGrid = $("#ItemGrid");
        oItemGrid.jqGrid({
            url: 'WSAjax.asmx/GetDataForGrid',
            mtype: "POST",
            datatype: "json",
            ajaxGridOptions:
            {
                contentType: "application/json"
            },
            serializeGridData: function (data) {
                return JSON.stringify(data);
            },
            colNames: ['Type', 'Name', 'Desc'],
            colModel: [
                { name: 'Type', index: 'Type', width: 40 },
                { name: 'Name', index: 'Name', width: 40 },
                { name: 'Desc', index: 'Desc', width: 40, sortable: false}],
            prmNames: { page: "pageIndex", rows: "pageSize", sort: "sortIndex", order: "sortDirection", search: "_search" },
            autowidth: true,
            height: 'auto',
            rowNum: 10,
            rowList: [10, 20, 30, 40],
            jsonReader:
            {
                root:"type",
                page:"page",
                total:"total",
                records:"records",
                repeatitems: false,
                cell:"cell",
                id:"id"
            },
            viewrecords: true,
            gridview: true,
            autoencode: true,
            ignoreCase: true,
            caption: 'Remember Sorting and Filtering Functionality',
            pager: '#IGPager',
            onSortCol: function (colModel, colName, sortOrder) {
                saveSortInfoToCookie("ItemGridSortInfo", $("#ItemGrid"));
                var storeval = $.cookie("ItemGridSortInfo");
                alert("Saving sort info in cookie: " + storeval);
            },
            //loadonce: true
        }).jqGrid('navGrid', '#IGPager', { edit: false, add: false, del: false }, {}, {}, {}, {}, {});
    });

Answer 1

首先，您忘记在您发布的 JSON 数据末尾关闭 }。在小修复之后，您需要修复主要问题：您需要修改 jsonReader 使其与您发布的 JSON 数据相对应。例如，您可以使用

jsonReader: {
    root: "d.rows",
    page: "d.page",
    total: "d.total",
    records: "d.records"
}

The demo 演示结果。

顺便说一句，如果您使用总共大约 200 行的网格，您可以考虑使用 loadonce: true 选项。在这种情况下，服务器应该从独立于pageIndex 和pageSize 的服务器返回所有数据。您仍然需要对与sortIndex 和sortDirection 对应的数据进行排序。您不需要实现数据的服务器端排序（过滤）。优点将是：1）简化服务器代码 2）简化服务器和客户端之间的接口 3）更好负责的前端（从用户的角度来看），因为数据的分页、排序和过滤将在客户端实现并且用户几乎可以立即看到结果。