My jQgrid не отображает данные json

Question

Я новичок в jQgrid и jQuery. Я хочу отображать данные JSON в моем jQgrid. Но мой код не показывает данные 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) более ответственный интерфейс (с точки зрения пользователей), поскольку пейджинг, сортировка и фильтрация данных будут реализованы на стороне клиента и пользователь увидит результаты практически сразу.