JqGrid

简介:

qGrid4.2实践-2-集成Spring MVC
记录一下以作参考
SpringMVC的安装可以参考SpringMVC3.0+rest小例子

jsp页面

<div id="_grid" style="width: 100%; * width: 99%; zoom: 1;">
<table id="list" width="100%"></table> 
<div id="pager"></div>
</div>
<script> 
$(function(){
    $("#list").jqGrid({
		url : "${pageContext.request.contextPath}/user/list",
		contentType : 'application/json',
		mtype : "post",
		datatype : 'json',
		prmNames : {search : "search"},
		jsonReader : {id : "0", repeatitems : false, userdata : "userdata"},
		height : "auto",
		colNames : ["ID", "用户名", "全名", "状态", "是否管理员"],
		colModel : [{name:"id", index:"id", hidden:true},
		    		{name:"username", index:"username"},
		    		{name:"fullname", index:"fullname"},
		    		{name:"enabled", index:"enabled"},
		    		{name:"is_admin", index:"is_admin"}],
		pager : "#pager",
		autoWidth : true,
		rowNum : 10,
		rownumbers : true,
		viewrecords: true,
		caption : "用户列表"
		});
	$(window).bind('resize', function() {
		$("#list").setGridWidth($("#_grid").width() - 10);
	}).trigger('resize');
	jQuery("#list").jqGrid('navGrid', '#pager', {});
});
</script>


其中几个关键的属性
url :查询请求地址
datatype :返回值类型,这里使用JSON进行传递
prmNames :传递给后台的属性定义,本例中定义search:"search",如果不这么定义的话,后台接收到的将会是_search。
jsonReader :页面接收后台数据属性定义,具体参考API解释

Controller类

@RequestMapping(value="/list")
	@ResponseBody
	public DataResponse<User> list(@RequestParam(defaultValue="1",value="page") String page,
			@RequestParam(defaultValue="20",value="rows") String rows,
			@RequestParam("sidx") String sidx,
			@RequestParam("sord") String sord,
			@RequestParam("_search") boolean search,
			@RequestParam(required=false,value="searchField") String searchField,
			@RequestParam(required=false,value="searchOper") String searchOper,
			@RequestParam(required=false,value="searchString") String searchString,
			@RequestParam(required=false,value="filters") String filters
			){
		try {
			DataRequest request = new DataRequest();
			request.setPage(StringUtils.isEmpty(page) ? 1 : Integer.valueOf(page));
			request.setRows(StringUtils.isEmpty(rows) ? 20 : Integer.valueOf(rows));
			request.setSidx(sidx);
			request.setSord(sord);
			request.setSearch(search);
			request.setSearchField(searchField);
			request.setSearchOper(searchOper);
			request.setSearchString(searchString);
			return customSearchUtil.search(request, User.class);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}



为接收前台数据,特定义了DataRequest类,其中的属性跟页面传递过来的属性一一对应

public class DataRequest implements java.io.Serializable {
	
	private static final long serialVersionUID = 1L;
	
	//当前页码
	private int page;
	//页面可显示行数
	private int rows;
	//用于排序的列名
	private String sidx;
	//排序的方式desc/asc
	private String sord;
	//是否是搜索请求
	private boolean search;
	//已经发送的请求的次数
	private String nd;
}


给前台发送数据也定义了相应的DataResponse类

public class DataResponse <T> {

	//需要显示的数据集
	private List<T> rows;

	//每页显示数量
	private int page;
	
	//数据总数
	private int records;
	
	//可显示的页数
	private int total;
	
	//自定义数据
	private Map<String, Object> userdata;
}



Controller类接收数据后即传给后台service类处理并返回DataResponse对象给页面
处理方法如下

public DataResponse<T> search(DataRequest request, Class<T> cls) {
		DataResponse<T> response = new DataResponse<T>();
		int count;//总记录数
		int limit = request.getRows() <= 0 ? 20 : request.getRows();//每页显示数量
		int totalPages;//总页数
		int page = request.getPage() <= 0 ? 1 : request.getPage();//当前显示页码
		List<T> list;
		
		Set<Criterion> set = initSearchCondition(request.isSearch(), request.getSearchField(), request.getSearchOper(), request.getSearchString());
		count = customDao.count(cls, set);
		totalPages = count / limit;
		if (count % limit != 0) {
			totalPages++;
		}
		int currPage = Math.min(totalPages, page);
		
		int start = currPage * limit - limit;
		start = start < 0 ? 0 : start;
		
		list = customDao.list(cls, set, start, limit);
		response.setRecords(count);
		response.setTotal(totalPages);
		response.setPage(currPage);
		response.setRows(list);
		
		return response;
	}
本文转自wiwi博客51CTO博客,原文链接http://blog.51cto.com/wiwili/1965635如需转载请自行联系原作者

wiwili
相关文章
|
JavaScript API
06jqGrid - 方法
06jqGrid - 方法
48 0
08jqGrid - 自定义按钮
08jqGrid - 自定义按钮
49 0
03jqGrid - colModel 参数
03jqGrid - colModel 参数
32 0
|
JavaScript 前端开发 Java
19jqGrid - 多选
19jqGrid - 多选
40 0
|
JavaScript 索引
jQuery 隔行变色
jQuery 隔行变色
46 0
|
1月前
|
JavaScript API 容器
jQuery Accordion
jQuery Accordion
15 4
|
JavaScript 前端开发
3、DataTables
3、DataTables
82 0
|
XML JavaScript 前端开发
jqGrid 详解大全
jqGrid 各种参数 详解 JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。 JQGrid Demo 是一个在线的演示项目。
3585 0
|
前端开发 JavaScript
dwz中对jqGrid设置a标签
dwz中对jqGrid设置a标签
171 0
dwz中对jqGrid设置a标签
|
JavaScript 前端开发 数据格式
jqgrid addJSONData方法使用
对jqgrid的addJSONData的使用实践及总结。
3427 0