jqGrid 分页
程序员文章站
2022-03-29 19:48:20
这两天一直在搞jqGrid分页，焦头烂额，不过还是有点收获的（主要是后台分页）； jqGrid分页可以分为两种，远程数据（服务器数据）分页和本地数据分页， 先看远程数据分页： $("#testGrid"）.jqGrid（{ mtype: "POST", datatype: "json", //返回的 ......
这两天一直在搞jqgrid分页，焦头烂额，不过还是有点收获的（主要是后台分页）；
jqgrid分页可以分为两种，远程数据（服务器数据）分页和本地数据分页，
先看远程数据分页：
$("#testgrid"）.jqgrid（{
mtype: "post",
datatype: "json", //返回的是json格式的数据
pager: "#userlistpg", //表格分页
rownum: 2, // 每页多少行，用于分页
rownumbers: true,//显示行号
colmodel ： usercm，// 自定义
jsonreader: {
id : "id" //数据唯一值，
root: 'users', //加载的数据
page: 'page', //当前页
total: 'total', // 很重要 定义了 后台返回的总页数名称。
records: 'records', // 后台返回的总数据条数； 以上5个参数一定要跟后台返回的json格式数据中，名称相同
repeatitems: false,
},
onpaging: function (pagebtn) { //翻页按钮点击事件，pagebtn 与 pager（表格分页有关），为 next_ 加上分页名
var re_page = $(this).getgridparam('page');//获取返回的当前页
var re_rownum = $(this).getgridparam('rownum');//获取每页数
if (pagebtn === "next_userlistpg") {
queryfunc(re_page, re_rownum);
}else if (pagebtn === "prev_userlistpg") {
queryfunc(re_page, re_rownum);
}else if (pagebtn === "last_userlistpg") {
queryfunc(re_total, re_rownum);
}else if (pagebtn === "first_userlistpg") {
queryfunc(1, re_rownum);
}
},
}）；
function queryfunc（cr_page，size） {
//加载数据：
$("#testgrid").jqgrid('setgridparam',{
url: "getusr.do",
postdata:{ page : cr_page, size : size, 'user_age' : 20}, //发送数据，查第一页，只查2条（grid rownum），找到所有20岁的人
}).trigger("reloadgrid");
}
后台返回数据：
{
page: "1", //当前页
total: "3" //一共的页数
records ："10",//总条数
users :[
{id:"1",user_name:"张三",age:"20",},
{id:"2",user_name:"李四",age:"20",},
]，
}
加载本地数据:
初始化grid：
$("#testgrid"）.jqgrid（{
mtype: "post",
datatype: "local", //返回的是json格式的数据
pager: "#toollistpg", //表格分页
rownum: 2, // 每页多少行，用于分页
rownumbers: true,//显示行号
colmodel ： usercm，// 自定义
onpaging: function (pagebtn) { //翻页按钮点击事件，pagebtn 与 pager（表格分页有关），为 next_ 加上分页名
var re_page = $(this).getgridparam('page');//获取返回的当前页
var re_rownum = $(this).getgridparam('rownum');//获取每页数
if (pagebtn === "next_userlistpg") {
queryfunc(re_page, re_rownum);
}else if (pagebtn === "prev_userlistpg") {
queryfunc(re_page, re_rownum);
}else if (pagebtn === "last_userlistpg") {
queryfunc(re_total, re_rownum);
}else if (pagebtn === "first_userlistpg") {
queryfunc(1, re_rownum);
}
},
}）；
function queryfunc（cr_page，size）{
$.aiax({
type:"post",
url : "getusr.do",
data:{
page: cr_page,
size: size
user_age :20
},
async:false, //同步
success:function (data) {
data = json.parse(data)； //装换成json格式
//加载数据
$("#testgrid"）.jqgrid('setgridparam', {
data :data.users,
localreader:{
root: function () {returndata.users},
page: function(object){ returndata.page},
total:function(object){ returndata.total},
records:function(object){ returndata.records},
repeatitems : false
},
}).trigger("reloadgrid");
}，
error : function(xhr, stat, e){
console.error(xhr);
}
});
}
本地数据：
data：{
page: "1", //当前页
total: "3" //一共的页数
records ："10",//总条数
users :[
{id:"1",user_name:"张三",age:"20",},
{id:"2",user_name:"李四",age:"20",},
]，
}
这样就能加载进去了，
加载远程数据是异步方法，在执行过程中界面还可以操作，没有数据时没办法弹框报错
个人更新加载本地数据，先将数据从服务器上获取再加载，加载的方法可以封装，不用每次都写