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

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