Jqgrid+spring mvc使用心得

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

项目语言及架构：java spring mvc

1、jqgrid的创建：

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

2、html代码

<div id="jqgrid-wrapper">
	<table id="mygrid" class="table table-striped table-hover">
		<tr>
			<td></td>
		</tr>
	</table>
	<div id="jqgrid-pager"></div>
</div>

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：排序方式

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