JqGrid Demo json

最新推荐文章于 2017-02-17 11:07:42 发布

原创最新推荐文章于 2017-02-17 11:07:42 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #json #demo

jqGrid json 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何利用jqGrid插件实现后台数据的异步查询，并以表格形式展示。重点包括配置参数、jsonReader设置、页面翻页与排序功能的实现。通过实例代码演示，帮助开发者解决常见问题。

目的：实现使用jqGrid插件实现后台数据的异步查询并以表格显示。
环境：为了减少代码，只保留了struts2.

注意点：
1：
笔者也在网上看过一些例子。但是总是不能很顺利地实现。
关键点在于：


jQuery("#jqgrid_json").jqGrid({
		datatype: "json",
		url:"jsonGridAction",
		height: "auto",
		width : 750,
	   	colNames:['Inv No', 'Client'],
	   	colModel:[
	   		{name:'no',index:'no', width:60, sorttype:"int"},
	   		{name:'busynessName',index:'busynessName', width:100}	
	   	],
	   	jsonReader:{
	   		root : "dataroot",
	   		records: "totalrecords",
	   		page: "currpage",
	   		total: "totalpages",
	   		repeatitems : false
	   		},
	   	viewrecords : true,
	   	multiselect: false,
		pager: '#pager2',
		rowNum:10,
	   	rowList:[10,20,30],
		sortname: 'no',
	   	caption: "jQGrid json Demo"
	}).navGrid("#pager2",{edit:false,add:false,del:false});

[b]
jsonReader的设置必须跟后台拼写的json数据一致。
比如：
{"totalpages" : "2","currpage" : "1","totalrecords" : "15","dataroot" :
[{"no":"0","busynessName":"name0"},
{"no":"1","busynessName":"name1"},
{"no":"2","busynessName":"name2"},
{"no":"3","busynessName":"name3"}
]
}
[/b]

2：
jqgrid在实现翻页，排序等功能时，会想后台传递特定参数(ps:jqgrid有自己默认的参数key!!)，比如：
[b]
{page:“page”,rows:“rows”, sort:“sidx”, order:“sord”, search:“_search”,
nd:“nd”, id:“id”, oper:“oper”, editoper:“edit”, addoper:“add”, deloper:“del”,
subgridid:“id”, npage:null, totalrows:“totalrows”}
[/b]
对于这些key,需要在action中设置set/get函数，当然不需要全部设置。

如果还有什么不清楚的，请留言。有代码可以参考哦！