先说后端分页，主要是利用sql语句查询时，用游标 offset , limit 来控制。
那么页面js请求，如何将这两个关键参数，映射到controller的modal中呢。
下面是参数映射的核心地方 ， 注意 prmNames 这个参数，定义了 jsGrid 中的参数 映射到controller中modal 的参数名, pageNum和 limit是 我们modal中的 成员变量名，分别对应jqGrid 中的 page 和 rows。而modal 中 offset 可以通过 计算得来 ，比如 offset = (pageNum-1)*limit 。
prmNames : {
page:"pageNum", // 页码（第几页）
rows:"limit", //每页多少条数据
order: "order"
}
这样请求重要的参数就能顺利映射过去。
那么 controller中的 查询结果 怎么回到页面呢， 请看 jsonReader 这个参数，此参数定义了 返回对象的 格式，。
我们的数据应该长这样：
{"data":[{....}, {....}] ,
"currPage": 2 ,
"totalPage": 10,
"totalCount": 231
}
如何构建上面json结构的数据， 相比大家都会，就不废话了。
jsonReader : {
root: "pager.data", // 数据列表
page: "pager.currPage", // 当前第几页
total: "pager.totalPage", // 总共多少页
records: "pager.totalCount" // 总记录数
},
完整的js代码块如下：
$("#jqGrid").jqGrid({
url : 'api/list',
mtype: 'post',
datatype : "json",
colModel : [
{ label: '用户数', name: 'fa', width: 90, sortable: false},
{ label: '话单数量', name: 'dfCnt', width: 100, sortable: false, key: true},
{ label: '金额', name: 'sFee', width: 80, sortable: false,
formatter:function(value, options, row){
return value ? value.toFixed(2) : '-' ;
}}
],
viewrecords : true,
height : 385,
rowNum : 10,
rowList : [ 10, 30, 50 ],
rownumbers : false,
rownumWidth : 25,
autowidth : true,
multiselect : false,
pager: "#jqGridPager",
footerrow:true, //加这个标识
jsonReader : {
root: "pager.list",
userdata:"sumData",
page: "pager.currPage",
total: "pager.totalPage",
records: "pager.totalCount"
},
prmNames : {
page:"pageNum",
rows:"limit",
order: "order"
}
});
后端controller代码：
// controller 方法代码块，仅供参考
@PostMapping("/list")
@ResponseBody
public Response_2 list(CubeBill cubeBill)
{
//查询记录总数
Integer count = cubeBillService.countCubeBills(cubeBill);
//查询分页详情
List<CubeBill> list = cubeBillService.collectCubeBillPage(cubeBill);
// 封装 data ，currPage，totalPage， totalCount 的模型对象
PageVO pager = new PageVO(list, count, cubeBill.getLimit(),
cubeBill.getPageNum());
Response_2 res = Response_2.getNew().success("pager", pager);
res.put("sumData", sumCB);
return res;
}
// 这里是定义的返回类型 Response_2的内容
public class Response_2 extends HashMap<String, Object> {
private Response_2() { }
public static Response_2 getNew(){
return new Response_2();
}
public Response_2 success(String message) {
this.put("status", "0");
this.put("message", message);
return this;
}
public Response_2 success(String key, Object value) {
this.put(key, value);
return this;
}
public Response_2 fail() {
this.put("status", "1");
this.put("message", "系统错误");
return this;
}
public Response_2 fail(String message) {
this.put("status", "1");
this.put("message", message);
return this;
}
public Response_2 fail(String key, Object value) {
this.put("status", "1");
this.put(key, value);
return this;
}
}
对 jqGrid 中的参数感兴趣的可以看这里
http://blog.mn886.net/jqGrid/ ，这里面有详细的初始化参数解释。
============================分割线====下面是前端分页==============
上面后端分页，适用于 查询的结果集比较大的情况， 对于单次查询耗时较长，且结果集不是特别大的，习惯用一次全部查出，前端分页。
可以貌似 jqGrid 对于这种情况，支持不是特别好，找了好久没找到解决办法，目前是这样解决的。
1.将datatype设置为 'local'， datatype: 'local',
2.重写onPaging方法，这个方法是 翻页事件 触发函数。
3.将jsonReader改成localReader , 这一步，我单独抽成了一个方法
[图片上传中...(image.png-8d12f5-1544754871061-0)]
重写入下，：
onPaging:function(pageBtn){ //翻页实现
var records = $("#jqGrid").getGridParam('records');//获取返回的记录数
var page = $("#jqGrid").getGridParam('page');//获取返回的当前页
var rowNum = $("#jqGrid").getGridParam('rowNum'); //获取显示配置记录数量
var total = Math.ceil(records/rowNum); //$("#jqGrid").getGridParam('total');//获取总页数
if(pageBtn==="next" && page<total){
page = parseInt(page)+1;
}
if(pageBtn==="prev" && page>1){
page = parseInt(page)-1;
}
if(pageBtn==="last"){
page = total;
}
if(pageBtn==="first"){
page = 1;
}
//这里的 loadLoalData( );是自定义的一个js方法。重复利用
loadLocalData(page);
}
loadLocalData()方法
function loadLocalData(page){// page参数，显示 第几页
var rowNum = $("#jqGrid").getGridParam('rowNum'); //获取显示配置记录数量
var mydata = {};
mydata.rows = vm.q.savedData;
mydata.page = page;
mydata.records = mydata.rows.length;
mydata.total = Math.ceil(mydata.records/rowNum);
if(!mydata.rows || mydata.rows.length ==0 ){
$("#jqGrid").jqGrid("clearGridData");
}
$("#jqGrid").jqGrid("setGridParam", {
data: mydata.rows,
localReader:{
rows:function(object){ return mydata.rows ;},
page:function(object){ return mydata.page ;},
total:function(object){ return mydata.total ;},
records:function(object){ return mydata.records ;},
repeatitems : false
}
}).trigger("reloadGrid");
}
完整 的 js 代码块大致这样，如下：
$("#jqGrid").jqGrid({
datatype: 'local',
colModel : [
{ label: '用户数', name: 'fa', width: 90, sortable: false},
{ label: '话单数量', name: 'dfCnt', width: 100, sortable: false, key: true},
{ label: '金额', name: 'sFee', width: 80, sortable: false, formatter:function(value, options, row){
return value ? value.toFixed(2) : '-' ;
}}
],
viewrecords : true,
height : 385,
rowNum : 10,
rowList : [ 10, 30, 50 ],
autowidth : true,
pager: "#jqGridPager",
onPaging:function(pageBtn){ //翻页实现
console.log(pageBtn);
var records = $("#jqGrid").getGridParam('records');//获取返回的记录数
var page = $("#jqGrid").getGridParam('page');//获取返回的当前页
var rowNum = $("#jqGrid").getGridParam('rowNum'); //获取显示配置记录数量
var total = Math.ceil(records/rowNum); //$("#jqGrid").getGridParam('total');//获取总页数
if(pageBtn==="next" && page<total){
page = parseInt(page)+1;
}
if(pageBtn==="prev" && page>1){
page = parseInt(page)-1;
}
if(pageBtn==="last"){
page = total;
}
if(pageBtn==="first"){
page = 1;
}
loadLocalData(page);
}
});
不知道是否表达清楚了，欢迎大家一起讨论jqGrid的用法。
