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

Question

我的子网格只显示列标题，而不从主网格加载json数据。列为空。我遵循了JQueryGridSubGridforParentChildrelationship的教程

但它不起作用。

这是我的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回调（请参阅答案）会更安全。

在我看来，你的主要错误似乎在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演示发布他的问题。