Jqgrid+spring mvc使用心得

前言:项目需要用到表格插件,本来觉得jquery datatable样式不错,后台发现没有继承checkbox等问题,最终转而使用jqgrid。

项目语言及架构:java spring mvc

1、jqgrid的创建:

jar包地址:http://pan.baidu.com/s/1nutFNvz 密码:i7ka

2、html代码


3、js代码

3.1、初始化

$('#mygrid').jqGrid({
	url : '${pageContext.request.contextPath}/cus/xxx.do',
	postData:{'menuId':$('#menuId').val(),'type':$('#type').val()},
	mtype : "POST",
	contentType : "application/json",
	datatype : "json",
	colModel : [ {
		label : '选择',
		name : 'id',
		key : true,
		hidden : true
	}, {
		label : '名称',
		name : 'name'
	}, {
		label : '描述',
		name : 'remark'
	}, {
		label : '创建时间',
		name : 'createTime'
	} ],
	height : '100%',
	pager : 'jqgrid-pager',
	page : "${page}", //初始化查询页数
	rowNum : "${rows}",
	rowList : [ 10, 20, 30 ],
	sortname : 'createTime',
	sortable : true,
	sortorder : 'desc',
	jsonReader : {
		root : "formList", // json中代表实际模型数据的入口
		records : "records", // json中代表数据行总数的数据
		page : "page", // json中代表当前页码的数据
		total : "total", // json中代表页码总数的数据
		repeatitems : false
	},
	multiselect : true,
	onSelectRow : function(rowid,
			status) {
		selId = rowid;
	}
});

参数解释:

postData代表要传递的参数

colModel:表头

pager:'jqgrid-pager' 选用jgrid的分页器

page:页数,可定义变量(如:列表中点击修改,修改完成后还是回到当前页)

rowNum:条数

rowList:让用户选择自定义每页显示的条目数

sortname:排序字段

sorttable:是否排序

sortorder:排序方式

jsonReader:这个比较关键,就是从后台传递的数据

root :json中代表实际模型数据的入口

records: json中代表数据行总数的数据

page: json中代表当前页码的数据

total : json中代表页码总数的数据

multiselect:支持多条选择

onSelectRow:获取选中数据的id,更新和删除都需要用到


3.2、获取选中数据的id和当前页数

// 当前选择记录ID值 
var id = $("#mygrid").jqGrid("getGridParam", "selarrrow");   
// 取当前面页码
var page = $('#mygrid').getGridParam('page');


3.3、搜索

/*搜索*/
$("#searchBtn").click(function(){
	jQuery("#mygrid").jqGrid('setGridParam',{
		url: '${pageContext.request.contextPath}/cus/xxx.do',
		postData:{'searchField':$("#searchField").val()},
		page:1
	}).trigger("reloadGrid");
});
搜索以后会异步刷新表单,不需要整个页面刷新


4、后台

4.1、封装类传递数据,用于之前jsonReader中的变量

public class JqgridListForm implements Serializable{

	private static final long serialVersionUID = 1L;
	
	/* 当前页数 */
	private int page;
	/* 总页数 */
	private int total;
	/* 总计录数  */
	private long records;
	
	private List formList;
	
	public int getPage() {
		return page;
	}
	public void setPage(int page) {
		this.page = page;
	}
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	public long getRecords() {
		return records;
	}
	public void setRecords(long records) {
		this.records = records;
	}
	public List getFormList() {
		return formList;
	}
	public void setFormList(List formList) {
		this.formList = formList;
	}

}
4.2、controller

public JqgridListForm controllerName(
			@RequestParam(value = "page", defaultValue = "1") String page,
			@RequestParam(value = "rows", defaultValue = "10") String rows,
			@RequestParam(value = "sidx", required = false) String sidx,
			@RequestParam(value = "sord", required = false) String sord,
			@RequestParam(value = "searchField", required = false) String searchField) {
	// 当前页码
	int pageNo = Integer.parseInt(page);
	// 显示条数,默认10条
	int size = 10;
	if (!StringUtils.isEmpty(rows)) {
		size = Integer.parseInt(rows);
	}
	return service.methodName(params);
}
sidx:排序字段

sord:排序方式

这些是关键字,必须要这样命名,否则取不到









你可能感兴趣的:(心得)