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 演示发布他的问题。