0

jqGrid は、Java サービスから返された応答を表示していません。

HTML:

<table id="fbDetailTable" style="display: none"></table>

Java スクリプト:

jQuery("#fbDetailTable").jqGrid({

url: "/ReportBatch/rs/ReportService/getFB?fB="+frtBill,
    datatype: "json",
colNames: ['Store Number', 'Order Number', 'SKU number',
           'Shipped Quantity','Order Created Date'],
colModel:[{name:'strNbr',index:'strNbr',width:100,jsonmap:'strNbr'},
          {name:'orderNbr',index:'orderNbr',width:100,jsonmap:'orderNbr'},
          {name:'skuNbr',index:'skuNbr',width:100,jsonmap:'skuNbr'},
          {name:'shpdQty',index:'shpdQty',width:100,jsonmap:'shpdQty'},
          {name:'ordCrtDt',index:'ordCrtDt',width:100,jsonmap:'ordCrtDt'}],
jsonReader: { repeatitems : false, strNbr: "0" },
viewrecords: true, 
loadonce:true,                                
    caption:"Order Details"
});

サービスの応答:

[{"strNbr":"6310",
  "orderNbr":"10979577",
  "skuNbr":"646274",
  "shpdQty":"1",
  "ordCrtDt":"2013-01-29"},     
 {"strNbr":"6310",
  "orderNbr":"10979583",
  "skuNbr":"765992",
  "shpdQty":"3",
  "ordCrtDt":"2013-01-29"
 }]

応答ヘッダー:

Content-Type    application/json
Date    Mon, 04 Feb 2013 20:21:24 GMT
Server  Apache-Coyote/1.1
Transfer-Encoding   chunked
4

1 に答える 1

0

主なエラーは、入力 JSON データに「行」プロパティがなく、データを配列として直接配置することです。使うべき場合

root: function (obj) { return obj; }

の中にjsonReader。しかも設定strNbr: "0"がおかしい。id: "strNbr"代わりにすべきです。

rowNumさらに、デフォルト値 25 として十分に大きな値を使用することが非常に重要です (ドキュメントを参照してください)。これを行わないと、jqGrid は最初の 25 行のデータのみを表示します。それはあなたが望むものではありません。

使用することを強くお勧めするその他の重要なオプションは次のとおりgridview: trueですautoencode: true。このオプションheight: "auto"は、ほとんどのシナリオで非常に実用的です。したがって、コードは次のようになります

$("#fbDetailTable").jqGrid({
    url: "AVVD.json",
    datatype: "json",
    colNames: ["Store Number", "Order Number", "SKU number",
               "Shipped Quantity", "Order Created Date"],
    colModel: [
        { name: "strNbr" },
        { name: "orderNbr" },
        { name: "skuNbr" },
        { name: "shpdQty" },
        { name: "ordCrtDt" }
    ],
    cmTemplate: { width: 120 },
    jsonReader: {
        repeatitems: false,
        id: "strNbr",
        root: function (obj) {
            return obj;
        }
    },
    rowNum: 10000,
    gridview: true,
    autoencode: true,
    height: "auto",
    viewrecords: true,
    loadonce: true,
    caption: "Order Details"
});

次のような変数を追加で宣言できます

var intTemplate = { sorttype: "integer", formatter: "integer" },
    dateTemplate = { sorttype: "date", formatter: "date" };

テンプレートを使用し（回答を参照）、次のように変更colModelします

colModel: [
    { name: "strNbr", template: intTemplate },
    { name: "orderNbr", template: intTemplate },
    { name: "skuNbr", template: intTemplate },
    { name: "shpdQty", template: intTemplate },
    { name: "ordCrtDt", template: dateTemplate }
]

ここに表示される結果のデモ：

ここに画像の説明を入力

于 2013-02-05T07:02:39.347 に答える