0

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

但它不起作用。

这是我的 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":{}}
4

1 回答 1

0

首先，您发布的 JSON 数据中存在小错误。"trackingNr":"1Z1484366620874746"它在and之后不包含逗号"trackingNr":"1Z1484366620874764"。我希望在为问题准备数据时只是剪切和粘贴错误。无论如何，在加载错误的情况下包含loadError回调（参见答案）会更安全。

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

有人在评论中要求您准备 JSFiddle 演示，该演示演示了该问题，而您在准备时遇到了问题，因为使用datatype: "json"。另一方面，JSFiddle 确实为您提供了在案例中实现演示的可能性。可以使用Echo 服务。在 jqGrid 的情况下，只需要使用mtype: "POST"and 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 演示发布他的问题。

于 2014-09-23T17:25:42.673 回答