分页插件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;//响应结果msgprviate 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;}@Overridepublic 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;}@Overridepublic String toString() {return "PageUtil{" +"page=" + page +", limit=" + limit +'}';}
}

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

 <!--查询用户列表-->
<select id="findUsers"  parameterType="Map"  resultMap="UserResult">select id,name,password from tb_userorder 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{@Autowiredprivate  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{@Autowriedprivate 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项目集成方法和步骤，主要包含前端页面的设置和后端接口的实现方法和代码。