SpringBoot+Mybatis+Jqgrid实现分页显示

旧城等待， 2021-09-23 14:44 467阅读 0赞

此处就不对SpringBoot+Mybatis等环境进行说明，主要细说实现Jqgrid的分页显示功能的具体步骤，首先得去Jqgrid官网下载js插件包，链接为：[Jqgrid在线开发文档][Jqgrid]，此链接里面还有具体的教程解说和代码样例，非常适合读者去查看，下面开始进入正题。

（1）entity实体层如下：

/* * @description: 学生基本信息 * * */
    public class Student { 
    	
    	private int id;//主键
    	private String name;//姓名
    	private String age;//年龄
    	
    	public int getId() { 
    		return id;
    	}
    	public void setId(int id) { 
    		this.id = id;
    	}
    	public String getName() { 
    		return name;
    	}
    	public void setName(String name) { 
    		this.name = name;
    	}
    	public String getAge() { 
    		return age;
    	}
    	public void setAge(String age) { 
    		this.age = age;
    	}
    	
    	
    }

（2）Controller层编写：

import java.util.ArrayList;
    import java.util.Iterator;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.ServletRequest;
    
    import org.apache.ibatis.annotations.Param;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.google.gson.Gson;
    import com.grkj.redis.entity.Student;
    import com.grkj.redis.service.StudentService;
    
    @Controller
    @RequestMapping(path = "/student")
    public class StudentController { 
    	@Autowired
    	private StudentService studentService;
    	
    	@SuppressWarnings("rawtypes")
    	@GetMapping(path = "/getListPage")
    	@ResponseBody
    	public String getListPage(ServletRequest request) { 
    
    		List<Student> students = studentService.selectAll();
    		//总数
    		int i = students.size();
    		//每一页是多少条数据
    		int rows = Integer.parseInt(request.getParameter("rows"));
    		//页数
    		int page = Integer.parseInt(request.getParameter("page"));
    		int total = 1;
    		if(i > rows && ( i % rows ) != 0) { 
    			total = i/rows+1;
    		}else if(i<rows){ 
    			total = 1;
    		}
    		else { 
    			total = i/rows;
    		}
    		//分页显示
    		List<Student> listPage = studentService.getListPage(rows, page);
    		String str = new Gson().toJson(listPage);
    		//构造的传输数据格式
    		str = "{\"page\":\""+page+"\",\"records\":\""+i+"\",\"total\":\""+total+ "\",\"rows\":"+str+"}"; 
    		return str;
    	}
    }

在编写控制台代码时，笔者先是遍历Jqgrid发起的request请求中所有参数，查看它提交到后端的参数有哪些，然后通过浏览器控制台看到Jqgrid需要接收的数据格式，于是就想办法来构造这个数据格式，给Jqgrid进行解析。  
       此处需要在pom.xml文件中引入Gson包，如下：

<dependency>
    			<groupId>com.google.code.gson</groupId>
    			<artifactId>gson</artifactId>
    		</dependency>
    		<dependency>
    			<groupId>org.json</groupId>
    			<artifactId>json</artifactId>
    		</dependency>

（3）Service层代码如下：

import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    
    import com.gdupt.demo.admin.dao.StudentMapper;
    import com.gdupt.demo.admin.entity.Student;
    
    @Service
    public class StudentService { 
    	
    	@Autowired
    	private StudentMapper studentMapper;
    	
    	//查询总数
    	public List<Student> selectAll(){ 
    		return studentMapper.selectAll();
    	}	
    	
    	//查询分页数据
    	public List<Student> getListPage(int pageSize,int page){ 
    		Map<String,Object> map = new HashMap<String,Object> ();
    		int pageStart = pageSize*(page-1);
    		map.put("pageSize", pageSize);
    		map.put("pageStart", pageStart);
    		return studentMapper.getListPage(map);
    	}
    	
    }

（4）dao层的代码如下：

import java.util.List;
    import java.util.Map;
    
    import org.apache.ibatis.annotations.Mapper;
    
    import com.gdupt.demo.admin.entity.Student;
    
    @Mapper
    public interface StudentMapper { 
    
    	public List<Student> getListPage(Map<String, Object> map);
    	public List<Student> selectAll();	
    }

XML文件的SQL语句如下：

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    
    <mapper namespace="com.gdupt.demo.admin.dao.StudentMapper">
    	<select id="listPage" resultType="map">
    		select * from student 
    		<where> 
    			1=1
    			
    		</where>
    		
    		limit #{pageStart},#{pageSize}
    	</select>
    </mapper>

前端页面的代码编写如下：（此处的Jqgrid插件需要读者自行去下载，如果不清楚下载地址，可在文章开头进入Jqgrid官网进行下载。）

<html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/static/plugin/jquery/jquery-2.2.2.min.js"></script>
    <script type="text/javascript"
    		src="/static/plugin/jqgrid/js/jquery.jqGrid.src.js"></script>
    <link rel="stylesheet" href="/static/plugin/jqgrid/css/ui.jqgrid.css" />
    <link rel="stylesheet" href="/static/plugin/jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />
    <script type="text/javascript" src="/static/plugin/jqgrid/js/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript">
    	$(function() { 
    		//页面加载完成之后执行
    		pageInit();
    	});
    	function pageInit() { 
    		//创建jqGrid组件
    		//当浏览器调整大小时，调整jqGrid的大小
    		$(window).bind('resize', function () { 
    		        $("#list").setGridWidth($('.col-md-12').width());
    		}).trigger('resize');
    	
    		jQuery("#list").jqGrid(
    		{ 
    			url : '/student/getListPage',//组件创建完成之后请求数据的url，读者可以根据自己的
    			datatype : "json",//请求数据返回的类型。可选json,xml,txt
    			colNames : [ '学号', '姓名', '年龄'],//jqGrid的列显示名字
    			colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式等，并且每个字段名称都需要对应异步请求返回的数据字段，才能匹配上
    				{ name : 'id',index : 'id',width : 55,align : "center"},
    				{ name : 'name',index : 'name',width : 90,align : "center"}, 
    				{ name : 'age',index : 'age',width : 100,align : "center"}, 
    			],
    			height: $(window).height()-100,//获取电脑屏幕的大小并且减去特定的值
    		    autowidth: true,//如果shrinkToFit为true且设置了width值，则每列宽度会根据width成比例缩放；
    			shrinkToFit: true,//如果设为true，则Grid的宽度会根据父容器的宽度自动重算。
    			rowNum : 10,//一页显示多少条
    			rownumbers: true,//显示编号
    			rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
    			pager : '#pager',//表格页脚的占位符(一般是div)的id
    			sortname : 'no',//初始化的时候排序的字段
    			sortorder : "desc",//排序方式,可选desc,asc
    			mtype : "get",//向后台请求数据的ajax的类型。可选post,get
    			viewrecords : true,//是否显示总条数
    			hidegrid: false,
    			multiselect: false, //是否支持多选
    			caption : "学生基本信息"//表格的标题名字
    		});
    		/*创建jqGrid的操作按钮容器*/
    		/*可以控制界面上增删改查的按钮是否显示*/
    		jQuery("#list").jqGrid('navGrid', '#pager', { 
    			edit : false,
    			add : false,
    			del : false
    		});
    	}
    </script>
    </head>
    <body>
    	<table id="list"></table>
    	
    	<div id="page"></div>
    </body>
    </html>

[Jqgrid]: https://blog.mn886.net/jqGrid/