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 intilization代码是：

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）更好地负责前端（从用户的角度来看），因为数据的分页，排序和过滤将在客户端实现并且用户将立即看到结果。

我的jQgrid没有显示json数据

1 个答案: