JSON As generated by 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 Initialization Code:
$("#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'
});
服务器已成功命中,查询字符串如下:
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>
感谢您的帮助。
菲尔杜斯·阿米尔
最佳答案
您的主要错误是数据格式错误。你应该使用
{
"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
列定义中的属性。例如,在您的情况下,可以使用以下 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 数据不在数组中,而是在具有命名属性的对象中。类似 jsonmap: "cell.userId"
的属性需要指定相应网格列的值不应为默认值 userId
row 对象的属性,但另外它们也是“cell”属性的子项。顺便说一句,您在 JSON 数据中使用“userid”作为列名称和“userId”。最好使用与 JSON 数据相同的名称。当您使用与“名称”相同的“索引”属性时,您可以删除“索引”。在这种情况下,“name”属性的值将用作“index”。
因为您对网格的所有列使用了“width:100”属性,所以我使用了 cmTemplate: {width: 100}
参数 colModel
定义更短,更好读。
您可以实时看到修改后的网格here .
我建议您另外以 ISO 形式 YYYY-mm-dd 发布日期并使用 formatter:'date'和 datefmt colModel
的属性(例如 formatter:'date', formatoptions:{newformat:'d-m-Y'}, datefmt: 'd-m-Y'
)
关于jquery - jqGrid 获取 json 但有空行且没有数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5361678/