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"と の後にカンマはありません"trackingNr":"1Z1484366620874764"。質問用のデータを準備する際のカット＆ペースト エラーだけであることを願っています。いずれにせよ、読み込みエラーが発生した場合は、loadErrorコールバック (回答を参照)を含める方が安全です。

あなたの主なエラーはbeforeProcessingコールバックの中にあるようです。コールバックのdataパラメーターには、サーバーの応答が含まれています。の中にあるアイテムの配列ですがdata.records、代わりに使用var rows = data.rows, ...します。行は に固定する必要がありますvar rows = data.records, ...。

コメントで、問題を示す JSFiddle デモを準備するように依頼されましたが、使用法のために準備に問題がありましたdatatype: "json"。一方、JSFiddle do は、その場合にデモを実装する可能性を提供します。Echo サービスを使用できます。jqGrid の場合は、 and を使用するだけ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 デモで質問を投稿するのに役立つことを願っています。

于 2014-09-23T17:25:42.673 に答える