我的jQgrid没有显示json数据 [英] My jQgrid is not displaying json data

问题描述

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

I am new in jQgrid and jQuery. I want to display JSON data in my jQgrid. But my code is not showing the jSON data which is coming from server and also I am mot getting any error for this. Where my code is going wrong??

从服务器端，JSON字符串的格式为(从预览窗口)

From server side, JSON string is coming in the format of(From preview window)

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输入代码是:

And my jQgrid intilization code is :

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 }, {}, {}, {}, {}, {});
    });

推荐答案

首先，您忘记在发布的JSON数据结尾处关闭}.在进行小规模修复之后，您需要修复主要问题:您需要修改jsonReader，使其与您发布的JSON数据相对应.您可以使用例如

First of all you forget closing } at the end of JSON data which you posted. After the small fix you need to fix the main problem: you need modify jsonReader so that it corresponds the JSON data which you posted. You can use for example

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

演示演示了结果.

通过这种方式，如果您使用的网格总共有大约200行，则可以考虑使用loadonce: true选项.如果服务器应独立于pageIndex和pageSize从服务器返回所有数据.您仍然需要对与sortIndex和sortDirection相对应的数据进行排序.您无需实现服务器端数据的排序(过滤).优点将是:1)简化服务器代码2)简化服务器与客户端之间的接口3)更好的负责任的前端(从用户的角度来看)，因为将在客户端实现数据的分页，排序和过滤用户将立即看到结果.

By the way if you works with grids having about 200 rows totally you can consider to use loadonce: true option. In the case the server should return all data from the server independent from pageIndex and pageSize. You need still sort the data corresponds to sortIndex and sortDirection. You will don't need to implement server side sorting (filtering) of the data. The advantage will be: 1) simplifying the server code 2) simplifying interface between the server and the client 3) better responsible frontend (from the users point of view) because paging, sorting and filtering of the data will be implemented on the client side and the user will see the results practically immediately.

这篇关于我的jQgrid没有显示json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！