jqGrid 远程数据分页与本地数据分页实例讲解

时间:2018-10-12
本文章向大家介绍jqGrid 远程数据分页与本地数据分页实例讲解，需要的朋友可以参考一下
这两天一直在搞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",},
  ]，
}
 
 这样就能加载进去了，
 加载远程数据是异步方法，在执行过程中界面还可以操作，没有数据时没办法弹框报错
 个人更新加载本地数据，先将数据从服务器上获取再加载，加载的方法可以封装，不用每次都写
随机文章
Javascript知识点必读
最近更新