分页插件jqGrid与Spring Boot项目整合

一、jqGrid分页插件使用

jqGrid是一个用来显示网格数据的jQuery插件。开发人员通过使用jqGrid可以轻松实现前端页面与后台数据的Ajax异步通信并实现分页功能，其特点如下；

（1）兼容目前流行的Web浏览器

（2）拥有完善强大的分页功能

（3）支持多种数据格式解析，XML,JSON, 数组等形式。

（4）提供丰富的选项配置及方法事件接口

（5）支持表格排序、拖动列、隐藏列

 （6）支持滚动加载数据

  （7）开源免费

jqGrid在GitHub上的仓库主页为：https://github.com/tonyomov/jqGrid

二、使用jqGrid实现分页的步骤

1、在页面中引入分页插件所需的源文件，代码如下所示：

<link href="plugins/jqgrid-5.5.2/ui.jqgrid-bootstrap4.css" />
<!--引入jquery.min.js文件-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js" />

<!--grid.locale-cn.js为国际化所需的文件，-cn表示中文--->
<script src="plugins/jqgrid-5.5.2/grid.locale-cn.js"></script>
<script src="plugins/jqgrid-5.5.2/jquery.jqGrid.min.js"></script>

2、在页面中需要展示分页数据的区域添加用于jqGrid初始化的代码：

<!--jqGrid必要DOM, 用于创建表格展示列表数据-->
<table id="jqGrid"  class="table table-bordered"></table>
<!--jqGrid的必要DOM，分页信息区域-->
<div id="jqGridPager"></div>

3、调用jqGrid分页插件的jqGrid()方法渲染分页展示区域，代码如下所示：

$(function () {
    $("#jqGrid").jqGrid({
        url: '/users/list',
        datatype: "json",
        colModel: [
            {label: 'id', name: 'userId', index: 'userId', width: 50, key: true, hidden: true},
            {label: '昵称', name: 'nickName', index: 'nickName', width: 180},
            {label: '登录名', name: 'loginName', index: 'loginName', width: 120},
            {label: '身份状态', name: 'lockedFlag', index: 'lockedFlag', width: 60, formatter: lockedFormatter},
            {label: '是否注销', name: 'isDeleted', index: 'isDeleted', width: 60, formatter: deletedFormatter},
            {label: '注册时间', name: 'createTime', index: 'createTime', width: 120}
        ],
        height: 560,
        rowNum: 10,
        rowList: [10, 20, 50],
        styleUI: 'Bootstrap',
        loadtext: '信息读取中...',
        rownumbers: false,
        rownumWidth: 20,
        autowidth: true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader: {
            root: "data.list",
            page: "data.currPage",
            total: "data.totalPage",
            records: "data.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order",
        },
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
        }
    });

    $(window).resize(function () {
        $("#jqGrid").setGridWidth($(".card-body").width());
    });

   

4、用户在每次点击分页按钮时都会发起一条向后端的users/list分页接口的请求，这是一个get方式请求，请求参数是search、nd、limit、page、sidx四个字段。响应的数据格式如下所示：

三、分页数据格式详解

1 .  jqGrid方法中的参数简介

jqGrid()方法中的参数及含义如下图所示：

2.  jsonReader简介

  jsonReader: {
            root: "data.list",  //数据列表字段
            page: "data.currPage",   //当前页码
            total: "data.totalPage",    //数据总页码
            records: "data.totalCount"  //数据总记录数
        },

jjsonReader对象定义了如何对后端返回的JSON数据进行解析，  后端响应结果数据格式定义在相应的类中，如下所示：

响应结果类result:

public class Result<T> implements Serializable{
    //响应码200为成功
    private int resultCode;
    //响应结果msg
    prviate String message;
    //返回数据
    private T data;

}

分页结果类PageResult定义如下所示:

public class implements Serializable{
    //总记录数
    private int totalCount;
    //每页记录数
    private int pageSize;
    //总页数
    private int totalPage
    //当前页数
    private int currPage;
   //列表数据 
   private List<T> list;
}

jqGrid分页插件在实现分页功能时必须读取当前页的所有数据列表、页码、总页码、总记录数量等数据，所以在jqGrid读取时直接读取对应的参数。分页相关的参数会被封装到PageResult中，因为后端统一返回的结果是将PageResult对象设置到Result结果类的data属性中，所以在读取设置jsonReader的数据列表root字段的值为data.list，其它参数类似。

四、整合jqGrid

本实例实现的分页功能是一个通用的分页接口，将分页数据封装到一个返回结果对象中，并通过JSON格式返回。具体步骤如下所示：

1、数据表结构（t_user表）

//建表sql命令
create table 'tb_user' (
      'id' int(11) not null auto_increment comment '主键',
      'name' varchar(100) not null default '' comment '登录名',
      'password' varchar(100) not null default '' comment '密码',
      primary key ('id')
)  engine=nnnodb auto_increment=1 default charset=utf8;

并在建表后增加一些数据 。

2、返回结果的封装

package ltd.newbee.mall.util;

import java.io.Serializable;

/**
 * @author 13
 * @qq交流群 796794009
 * @email 2449207463@qq.com
 * @link https://github.com/newbee-ltd
 */
public class Result<T> implements Serializable {
    private static final long serialVersionUID = 1L;
    private int resultCode;
    private String message;
    private T data;

    public Result() {
    }

    public Result(int resultCode, String message) {
        this.resultCode = resultCode;
        this.message = message;
    }

    public int getResultCode() {
        return resultCode;
    }

    public void setResultCode(int resultCode) {
        this.resultCode = resultCode;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    @Override
    public String toString() {
        return "Result{" +
                "resultCode=" + resultCode +
                ", message='" + message + '\'' +
                ", data=" + data +
                '}';
    }
}

实际返回数据示例

{
 "resultCode":200,
  "message": "SUCCESS",
  "data": [{
       "id" :2,
       "name": "user1",
       "password": "123456"
},{
       "id" :2,
       "name": "user1",
       "password": "123456"
    }]
  }

3、分页结果封装

package ltd.newbee.mall.util;

import java.io.Serializable;
import java.util.List;

/**
 * 分页工具类
 *
 * @author 13
 * @qq交流群 796794009
 * @email 2449207463@qq.com
 * @link https://github.com/newbee-ltd
 */
public class PageResult implements Serializable {

    //总记录数
    private int totalCount;
    //每页记录数
    private int pageSize;
    //总页数
    private int totalPage;
    //当前页数
    private int currPage;
    //列表数据
    private List<?> list;

    /**
     * 分页
     *
     * @param list       列表数据
     * @param totalCount 总记录数
     * @param pageSize   每页记录数
     * @param currPage   当前页数
     */
    public PageResult(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;
    }

}

分页结果数据包含了以下几个字段： 总记录数、每页记录数、总页数、当前页数和实际列表数据。

4、数据层分页代码实现

此实例采用MyBatis实现ORM,  user实体类代码，读者可自行实现。实现分页功能对应的方法在UserDao接口中相应方法如下：

//返回分页数据列表
List<User>  findUsers(PageQueryUtil pageUtil);
//返回数据总数
int  getTotalUser(PageQueryUtil pageUtil);

PageQueryUtil类代码如下所示：

package ltd.newbee.mall.util;

import java.util.LinkedHashMap;
import java.util.Map;

/**
 * 分页查询参数
 *
 * @author 13
 * @qq交流群 796794009
 * @email 2449207463@qq.com
 * @link https://github.com/newbee-ltd
 */
public class PageQueryUtil extends LinkedHashMap<String, Object> {
    //当前页码
    private int page;
    //每页条数
    private int limit;

    public PageQueryUtil(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("start", (page - 1) * limit);
        this.put("page", page);
        this.put("limit", limit);
    }


    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;
    }

    @Override
    public String toString() {
        return "PageUtil{" +
                "page=" + page +
                ", limit=" + limit +
                '}';
    }
}

UserMapper.xml文件新增两个方法映秀语句，代码如下所示：

 <!--查询用户列表-->
<select id="findUsers"  parameterType="Map"  resultMap="UserResult">
   select id,name,password from tb_user
   order by id desc
   <if  test="start!=null and limit!=null">
      limit #{start},#{limit}
   </if>
</select>

<!--查询用户总数-->
<select id="getTotalUser" parameterType="Map"  resultType="int">
   select count(*) from tb_user
</select>

5、业务层分页代码实现

 在service包中，新增业务类UserService,代码如下所示：

@Service
public class  UserService{

   @Autowired
   private  UserDao userDao;
  
   public PageResult getUserPage(PageQueryUtil pageUtil){
        
         //当前页码中的数据列表
         List<User> users=userDao.findUsers(pageUtil);
         //数据总条数，用户计算分页数据
         int total=userDao.getTotalUser(pageUtil);
         //分页信息封装
         PageResult pageResult=new PageResult(users
                        ,total
                        ,pageUtil.getLimit()
                        ,pageUtil.getPage());
        
          return pageResult;
   }
}

6、控制层分页代码实现

在controller中，新建PageTestController类，用于实现分页请求的处理并返回查询结果，代码如下所示：

@RestController
@RequestMapping("/users")
public class PageTestController{
     @Autowried
     private UserService userService;
     //分页功能测试
     @RequestMapping("/list",method=RequestMethod.GET)
     public Result list(@RequestParam Map<String Object> params){
          Result result=new Result();       
        if(StringUtils.isEmpty(param.get("page"))||StringUtils.isEmpty(param.get("limit"))) 
         {
          //返回错误码
          result.setResultCode(500);
          //错误信息
          result.setMessage("参数异常");
          return result;
            }
      
     //封装查询参数
      PageQueryUtil queryParamList=new PageQueryUtil(params);
      //查询并封装分页结果集 
      PageResult userPage=userService.getUserPage(queryParamList);
      result.setResultCode(200);
      result.setMessage("查询成功");
     //返回分页数据
     result.setData(userPage);
     return result;    
     }
}

7、分页功能测试

　　在编码完成后启动SpringBoot项目。在启动成功后打开浏览器，在地址栏输入如下地址：

https://localhost:8080/users/list?page=1&limit=10

在结果页面中可以看到分页数据的结果返回。

此文主要论述了jqGrid插件与SpringBoot项目集成方法和步骤，主要包含前端页面的设置和后端接口的实现方法和代码。