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 回答