Jqgrid+spring mvc使用心得

来源：互联网发布：redis 哨兵模式 java 编辑：程序博客网时间：2024/05/03 21:02

前言：项目需要用到表格插件，本来觉得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：排序方式

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

0 0