Jqgrid пуст, не загружает данные json из основной сетки

Question

В моей подсети отображаются заголовки столбцов, но не загружаются данные json из основной сетки. Столбцы пусты. Я следил за учебником по JQuery Grid-SubGrid for Parent-Child relation

но он не работает.

Это мой Javascript код:

 jQuery().ready(function() { 
       var grid = jQuery("#shipment_grid"); 
       var mainGridPrefix = "s_"; 
       grid.jqGrid({ 
        url: '${pageContext.request.contextPath}/getTruckShipmentJSONAction?truckId=' + <c:out value="${truckId}" />, 
        datatype: "json", 
        mtype: 'GET', 
        loadonce: true, 
        colNames: ['Lead Tracking #'], 
        colModel: [ 
         {name: 'trackingNr', index: 'trackingNr', width: 100, align: 'left'} 
        ], 
        rowNum: 10, 
        height: 230, 
        width: 700, 
        idPrefix: mainGridPrefix, 
        autoheight: true, 
        rowList: [10, 20, 30], 
        pager: jQuery('#shipment_grid_pager'), 
        sortname: 'trackingNr', 
        sortorder: "desc", 
        jsonReader: { 
         root: "records", 
         page: "page", 
         total: "total", 
         records: "rows", 
         repeatitems: false 
        }, 
        viewrecords: true, 
        altRows: false, 
        gridview: true, 
        multiselect:true, 
        hidegrid: false, 
        shrinkToFit: true, 
        forceFit: true, 
        idPrefix: mainGridPrefix, 
        caption: "Shipments Overview", 
        subGrid: true, 
        beforeProcessing: function(data) { 
         //align 'Lead Tracking #' column header to the left 
         grid.jqGrid ('setLabel', 'trackingNr', '', {'text-align':'left'}); 

         var rows = data.rows, l = rows.length, i, item, subgrids = {}; 
         for (i = 0; i < l; i++) { 
          item = rows[i]; 
          if (item.shipUnitView) { 
           subgrids[item.id] = item.shipUnitView; 
          } 
         } 
         data.userdata = subgrids; 

        },    
        subGridRowExpanded: function (subgridDivId, rowId) { 
         var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"), 
          pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId), 
          subgrids = $(this).jqGrid("getGridParam", "userData"); 

         $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId)); 
         $subgrid.jqGrid({ 
          datatype: "local", 
          data: subgrids[pureRowId], 
          colNames: ['Ship Type (Pallet/Carton)', 'Ship Unit (Pallet ID/Cone #)', 'Total Cartons'], 
          colModel: [ 
           { name: "shipUnitType", index: 'shipUnitType', width: 100, align: 'center'}, 
           { name: "reference", index: 'reference', width: 100, align: 'center'}, 
          { name: "totalOfCartons", index: 'totalOfCartons', width: 100, align: 'center'} 
          ], 
          sortname: "shipUnitType", 
          sortorder: "desc", 
          height: "100%", 
          rowNum: 10, 
          autowidth: true, 
          autoencode: true, 
          jsonReader: { 
           root: "records", 
           records: "rows", 
           repeatitems: false,  
           id: "reference" }, 
          gridview: true, 
          idPrefix: rowId + "_" 
         }); 
        } 
       }).navGrid('#shipment_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true}); 


      }); 


This is my json data from the server: 

{"page":1, 
    "records":[ 
     {"id":2,"trackingNr":"1Z1484366620874728", 
     "shipUnitView":[{"reference":"65000943","shipUnitType":"CARTON","totalOfCartons":1}, 
         {"reference":"65000942","shipUnitType":"CARTON","totalOfCartons":1}]}, 

     {"id":4, "trackingNr":"1Z1484366620874746" 
     "shipUnitView":[{"reference":"65000940","shipUnitType":"CARTON","totalOfCartons":1}, 
         {"reference":"65000939","shipUnitType":"CARTON","totalOfCartons":1}]}, 

     {"id":3, "trackingNr":"1Z1484366620874764" 
     "shipUnitView":[{"reference":"65000938","shipUnitType":"CARTON","totalOfCartons":1}, 
         {"reference":"65000937","shipUnitType":"CARTON","totalOfCartons":1}]} 
    ], 
    "recordsTotal":3,"rows":10,"sidx":null,"sord":"asc","total":1,"trackingNr":null,"truckId":"174225","truckShipmentComponent":{}} 

Answer 1

Прежде всего есть небольшие ошибки в данных JSON, которые вы публикуемые. Он не содержит запятых после "trackingNr":"1Z1484366620874746" и "trackingNr":"1Z1484366620874764". Я надеюсь, что во время подготовки данных для вопроса вырезается только ошибка &. В любом случае было бы безопаснее включить loadError callback (см. the answer) в случае ошибок при загрузке.

Ваша основная ошибка, как мне кажется, внутри обратного вызова beforeProcessing. Параметр data обратного вызова содержит ответ сервера. Массив предметов у вас внутри data.records, но вместо этого вы используете var rows = data.rows, .... Линия должна быть зафиксирована на var rows = data.records, ....

Один из вас попросил вас в комментарии подготовить JSFiddle-демонстрацию, которая демонстрирует проблему, и у вас возникли проблемы с ее подготовкой из-за использования datatype: "json". С другой стороны JSFiddle действительно предоставляет вам возможность реализовать демонстрации в этом случае. Можно использовать Echo service. В случае jqGrid нужно просто использовать mtype: "POST" и url: "/echo/json/". Чтобы сообщить службе эхо, какие данные, которые вы хотите иметь, нужно просто отправить JSON-кодированные данные в параметр json. Так заливка выглядит

// the data which we want to receive back 
var serverResponse = { 
     "page":1, 
     ... 
    }; 

$("#gridId").jqGrid({ 
    url: "/echo/json/", // use JSFiddle echo service 
    postData: { 
     json: JSON.stringify(serverResponse) // needed for JSFiddle echo service 
    }, 
    datatype: "json", 
    mtype: "POST", // needed for JSFiddle echo service 
    ... 
}); 

Рабочая JSFiddle демо вы можете найти здесь: http://jsfiddle.net/OlegKi/ntfw57zm/. Я делаю небольшую дополнительную оптимизацию вашего кода.

Надеюсь, что этот пример может помочь другим людям опубликовать свои вопросы с демонстрационными версиями JSFiddle.