jqGrid未顯示java服務響應

Question

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 

Answer 1

主要錯誤是您輸入的JSON數據沒有「行」屬性，並將數據直接作爲數組放置。在這種情況下，您應該使用

root: function (obj) { return obj; } 

內部的jsonReader。此外，設置strNbr: "0"是錯誤的。它應該是id: "strNbr"。

另外使用rowNum的值非常重要，它有足夠大的值作爲默認值25（請參閱the documentation）。如果你不這樣做，jqGrid將只顯示第一行數據。這不是你想要的。

我強烈建議您使用的其他重要選項有：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" }; 

和使用模板（見the answer）和修改colModel以下

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

產生的演示您將看到here：