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回调（请参阅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/"。要通知echo服务哪些数据需要您只需发送参数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演示发布他的问题。