js代码
$(function () {
$("#jqGrid").jqGrid({
url: baseURL + 'sys/dept/list',
datatype: "json",
colModel: [
{ label: 'xxx', name: 'deptId', index: "dept_id", width: 45, key: true },
{ label: 'xxx', name: 'name', index: "name", width: 75 },
{ label: 'xx', name: 'nameDescribe', width: 80 },
{ label: 'xx', name: 'orderNum', width: 80,},
{ label: 'xx', name: 'parentId', width: 80,},
{ label: 'xx', name: 'delFlag', width: 80,}
],
onSelectRow: function () {
//返回选中的id
selectedRowIndex = $("#" + this.deptId).getGridParam('selrow');
},
viewrecords: true,
height: 385,
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 25,
autowidth:true,
multiselect: true,
pager: "#jqGridPager",
jsonReader : {
root: "page.list",
page: "page.currPage",
total: "page.totalPage",
records: "page.totalCount"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
},
gridComplete:function(){
//隐藏grid底部滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
}
});
});
html
<div id="rrapp" v-cloak>
<div v-show="showList">
<div class="grid-btn">
<div class="form-group col-sm-2">
<input type="text" class="form-control" v-model="d.name" @keyup.enter="query" placeholder="">
</div>
<a class="btn btn-default" @click="query">查询</a>
<a v-if="hasPermission('xxx:xx:x')" class="btn btn-primary" @click="add"><i class="fa fa-plus"></i> 新增</a>
<a v-if="hasPermission('xxx:xx:x')" class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i> 修改</a>
<a v-if="hasPermission('xxx:xx:x')" class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i> 删除</a>
</div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
</div>
后台query查询
public class Query extends LinkedHashMap<String, Object> {
private static final long serialVersionUID = 1L;
//当前页码
private int page;
//每页条数
private int limit;
public Query(Map<String, Object> params){
this.putAll(params);
//分页参数
this.page = Integer.parseInt(params.get("page").toString());
this.limit = Integer.parseInt(params.get("limit").toString());
this.put("offset", (page - 1) * limit);
this.put("page", page);
this.put("limit", limit);
//防止SQL注入(因为sidx、order是通过拼接SQL实现排序的,会有SQL注入风险)
String sidx = (String)params.get("sidx");
String order = (String)params.get("order");
if(StringUtils.isNotBlank(sidx)){
this.put("sidx", SQLFilter.sqlInject(sidx));
}
if(StringUtils.isNotBlank(order)){
this.put("order", SQLFilter.sqlInject(order));
}
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
}
分页工具类
public class PageUtils implements Serializable { private static final long serialVersionUID = 1L; //总记录数 private int totalCount; //每页记录数 private int pageSize; //总页数 private int totalPage; //当前页数 private int currPage; //列表数据 private List<?> list; /** * 分页 * @param list 列表数据 * @param totalCount 总记录数 * @param pageSize 每页记录数 * @param currPage 当前页数 */ public PageUtils(List<?> list, int totalCount, int pageSize, int currPage) { this.list = list; this.totalCount = totalCount; this.pageSize = pageSize; this.currPage = currPage; this.totalPage = (int)Math.ceil((double)totalCount/pageSize); } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getTotalPage() { return totalPage; } public void setTotalPage(int totalPage) { this.totalPage = totalPage; } public int getCurrPage() { return currPage; } public void setCurrPage(int currPage) { this.currPage = currPage; } public List<?> getList() { return list; } public void setList(List<?> list) { this.list = list; } }