jqGrid 获取 json 但有空行且没有数据

Question

JSON 由 Spring 3 MVC 生成 @ResponseBody

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        {
            "id": "1",
            "cell": {
                "accountId": 1,
                "userId": 1,
                "transactionId": 6,
                "subCatId": 0,
                "accountName": "Credit Card",
                "remarks": "Movie Hall Pass",
                "amount": 250.0,
                "transactionDate": "2011-03-16",
                "subCatName": "Entertainment"
            }
        },
        {
            "id": "2",
            "cell": {
                "accountId": 2,
                "userId": 1,
                "transactionId": 7,
                "subCatId": 1,
                "accountName": "Savings Bank",
                "remarks": "Part at Besand Nagar",
                "amount": 5000.0,
                "transactionDate": "2011-03-16",
                "subCatName": "Dine Out"
            }
        }
    ]
}

JQGrid初始化代码：

$("#transactionLogTable").jqGrid({
                url: '/et/transaction/getTransactions?dateValue=03%2F16%2F2011',
                datatype: "json",
                loadError: function(xhr,status,error){alert(status+" "+error);},
                colNames:['Transaction ID', 'User ID', 'Subcat ID', 'Subcat Name',
                          'Account ID', 'Account Name', 'Date', 'Amount', 'Notes'],

                colModel:[
                    {name: 'transactionId', index: 'transactionId', width: 100},
                    {name: 'userid', index: 'userId', width: 100},
                    {name: 'subCatId', index: 'subCatId', width: 100},
                    {name: 'subCatName', index: 'subCatName', width: 100},
                    {name: 'accountId', index: 'accountId', width: 100},
                    {name: 'accountName', index: 'accountName', width: 100},
                    {name: 'transactionDate', index: 'transactionDate', width: 100},
                    {name: 'amount', index: 'amount', width: 100},
                    {name: 'remarks', index: 'remarks', width: 100}
                ],
                pager: "#pager",
                rowNum: 10,
                rowList: [10,20,30],
                sortname: 'userId',
                sortorder: 'asc',
                viewrecords: true,
                caption: 'Transactions'
            });

使用 QueryString 成功命中服务器，如下所示：

dateValue=03%2F16%2F2011&_search=false&nd=1300532086871&rows=10&page=1&sidx=userId&sord=asc

现在好了，我得到一个屏幕，其中显示了 jqGrid 和 2 个空行。我无法显示行内的数据。

我猜这与映射有关，但我已经尝试了尽可能多的组合。

包含的文件和版本：

<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery-ui-1.8.10.start/js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/form-2.52.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/validate-1.7.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/i18n/grid.locale-en.js" charset="utf-8"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/jquery.jqGrid.min.js"></script>

感谢您的帮助。

菲尔杜斯·阿米尔

Answer 1

您的主要错误是数据格式错误。你应该使用

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        {
            "id": "1",
            "cell": ["1", "1", "6", "0", "Credit Card", "Movie Hall Pass",
                     "250.0", "2011-03-16", "Entertainment" ]
        },
        ...
    ]
}

而不是

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        {
            "id": "1",
            "cell": {
                "accountId": 1,
                "userId": 1,
                "transactionId": 6,
                "subCatId": 0,
                "accountName": "Credit Card",
                "remarks": "Movie Hall Pass",
                "amount": 250.0,
                "transactionDate": "2011-03-16",
                "subCatName": "Entertainment"
            }
        },
        ...
    ]
}

一般情况下 jqGrid 足够灵活，可以读取几乎任何 JSON 数据。您只需定义 jsonReader jqGrid 参数，有时还可以定义 jsonmap< /code> 列定义中的属性。例如，在您的情况下，可以使用以下 jqGrid 定义读取您的数据

$("#transactionLogTable").jqGrid({
    // ... other parameters
    cmTemplate: {width: 100},
    colModel:[
        {name:'transactionId',   jsonmap: 'cell.transactionId'},
        {name:'userId',          jsonmap: 'cell.userId'},
        {name:'subCatId',        jsonmap: 'cell.subCatId'},
        {name:'subCatName',      jsonmap: 'cell.subCatName'},
        {name:'accountId',       jsonmap: 'cell.accountId'},
        {name:'accountName',     jsonmap: 'cell.accountName'},
        {name:'transactionDate', jsonmap: 'cell.transactionDate'},
        {name:'amount',          jsonmap: 'cell.amount'},
        {name:'remarks',         jsonmap: 'cell.remarks'}
    ],
    height: "auto",
    jsonReader: { repeatitems: false }
});

这里我使用 jsonReader: { Repeatitems: false } 来定义一行的 JSON 数据不在数组中，而是在 for of 中具有命名属性的对象。需要像 jsonmap: "cell.userId" 这样的属性来指定相应网格列的值不应作为 row 对象的默认 userId 属性，而是另外，它们也是“cell”属性的子属性。顺便说一句，您在 JSON 数据中使用“userid”作为列名称和“userId”。最好使用与 JSON 数据相同的名称。当您使用与“名称”相同的“索引”属性时，您可以删除“索引”。在这种情况下，“名称”属性的值将用作“索引”。

因为您对网格的所有列使用了“width:100”属性，所以我使用了 cmTemplate: {width: 100} 参数来使 colModel 定义更短、更易于阅读。

您可以在此处实时查看修改后的网格。

我建议您另外以 ISO 形式 YYYY-mm-dd 发布日期并使用 格式化程序:'date' 和 colModeldatefmt 属性code> （例如 formatter:'date', formatoptions:{newformat:'dmY'}, datefmt: 'dmY'）