jqGrid不显示java服务响应

时间:2013-02-04 20:51:13

标签: jquery jqgrid

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

1 个答案:

答案 0 :(得分:0)

主要错误是您的输入JSON数据没有“rows”属性,并将数据直接作为数组放置。如果你应该使用

root: function (obj) { return obj; }

jsonReader内。此外,设置strNbr: "0"是错误的。它应该是id: "strNbr"

另外,使用rowNum一些足够大的值作为默认值25(参见the documentation)非常重要。如果不这样做,jqGrid将只显示第25行的第一行数据。这不是你想要的。

我严格建议您使用的其他重要选项包括:gridview: trueautoencode: 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

enter image description here