下面是一个简单的
jqGrid和jsonreader的
demo：
HTML代码：
```
<
table id="my
Grid"></
table>
<div id="myPager"></div>
```
JavaScript代码：
```
$(function () {
$("#my
Grid").
jqGrid({
url: "data.json",
datatype: "json",
colNames: ["ID", "姓名", "年龄"],
colModel: [
{ name: "id", index: "id", width: 50 },
{ name: "name", index: "name", width: 100 },
{ name: "age", index: "age", width: 50 }
],
jsonReader: {
root: "data",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
rowNum: 10,
rowList: [10, 20, 30],
pager: "#myPager",
sortname: "id",
viewrecords: true,
sortorder: "asc",
caption: "JSON数据展示"
});
});
```
其中，data.json文件的内容如下：
```
{
"page": 1,
"total": 2,
"records": 15,
"data": [
{ "id": 1, "name": "张三", "age": 18 },
{ "id": 2, "name": "李四", "age": 20 },
{ "id": 3, "name": "王五", "age": 22 },
{ "id": 4, "name": "赵六", "age": 24 },
{ "id": 5, "name": "钱七", "age": 26 },
{ "id": 6, "name": "孙八", "age": 28 },
{ "id": 7, "name": "周九", "age": 30 },
{ "id": 8, "name": "吴十", "age": 32 },
{ "id": 9, "name": "郑一", "age": 18 },
{ "id": 10, "name": "王二", "age": 20 },
{ "id": 11, "name": "李三", "age": 22 },
{ "id": 12, "name": "张四", "age": 24 },
{ "id": 13, "name": "赵五", "age": 26 },
{ "id": 14, "name": "钱六", "age": 28 },
{ "id": 15, "name": "孙七", "age": 30 }
]
}
```
以上代码将服务器返回的data.json文件中的JSON数据解析成表格中的行和列，并展示在页面上。
扫一扫
1853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
