Jqgrid为空，不从主网格加载json数据

我的子网格只显示列标题，但不能从主网格加载json数据。 列是空的。 我按照JQuery Grid-SubGrid教程进行了父子关系

但它不起作用。

这是我的javascript代码：

jQuery().ready(function () { var grid = jQuery("#shipment_grid"); var mainGridPrefix = "s_"; grid.jqGrid({ url: '${pageContext.request.contextPath}/getTruckShipmentJSONAction?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 = $(""), 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":"1Z1484366620874746"和"trackingNr":"1Z1484366620874764" 。 我希望在准备问题的数据时，它只是剪切和粘贴错误。 无论如何，在加载错误的情况下包含loadError回调（请参阅答案 ）会更安全。

在我看来，你的主要错误是在beforeProcessing回调中。 回调的data参数包含服务器响应。 data.records包含的项目数组，但您使用的是var rows = data.rows, ... 该行应固定为var rows = data.records, ...

一个人在评论中要求你准备JSFiddle演示，该演示演示了这个问题，并且由于使用datatype: "json" ，你有准备它的问题。 另一方面，JSFiddle do为您提供了在案例中实现演示的可能性。 可以使用Echo服务 。 在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演示发布他的问题。