Datagrid组件的分页会往我们的后端发送如下的几个参数：
page[【当前所在的页数】、
rows【每页显示的行数】、
order【排序方式desc/asc】、
sort【排序的字段】，
因此我们需要在后台创建一个通用查询实体类QueryBas
public class QueryBase {
/**
* 要排序的字段名
*
* @Transient 这个注解表示tk.mybatis插件不要对该字段做数据库的映射
*/
@Transient
protected String sort;
/**
* 排序方式: desc \ asc
*/
@Transient
protected String order = "";
/**
* 获取一页行数
*/
@Transient
protected Integer rows;
/**
* 获取的页码
*/
@Transient
protected Integer page; }
因为Easyui的datagrid组件通过调用后台方法以后，接收返回的json数据的格式中接收的2个参数是 rows【数据的集合】、total【总的记录的集合】。 因此我们需要建立一个实体类page来接收
public class Page {
/**
* 分页数据的集合
*/
private List rows;
/**
* 总的记录数
*/
private long total;
/**
* 构造方法
*
* @param rows
* @param total
*/
public Page(List rows, long total) {
super();
this.rows = rows;
this.total = total;
}
public Page() {
super();
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
@Override
public String toString() {
return "Page{" +
"rows=" + rows +
", total=" + total +
'}';
}}3、我们需要对原先的实体类tuser进行改造，将原先的实体类继承QueryBase实体类如下
4、接着我们可以开始编写我们的分页方法了，因为所有的方法都是从dao层 开始写的，所以我们打开我们的mybatis-user.xml，从里面开始写分页的sql
<select id="queryUser" parameterType="com.lj.demo.sys.entity.TUser" resultMap="UserMap">
select * from t_user where 1=1
<if test="loginAccount!=null and loginAccount!=''">
and loginAccount like concat('%',#{loginAccount},'%')
</if>
<if test="loginPass!=null and loginPass!=''">
and loginPass like concat('%',#{loginPass},'%')
</if>
<if test="sort!=null and sort!=''">
order by ${sort}
<if test="order!=null and order!=''">
${order}
</if>
</if>
</select>5、分页插件工具类，
public class PageUtil {
private PageUtil() {
}
public static void startPage(Map<String, String> reqMap) {
int page = Integer.parseInt(reqMap.getOrDefault("page", "1"));
int size = Integer.parseInt(reqMap.getOrDefault("size", "20"));
//第一个参数是说明是第几页，第二个参数是我们每页显示的条数，
// 如果我们前端传进来的size是在【0，500】之间，那么二元表达式
//的结果是true，则每页显示的row是size，若我们传进来的size不是
// 在区间内，那么size默认为每页20
PageHelper.startPage(page, (size > 0 && size <= 500) ? size : 20);
}
@Deprecated
public static HashMap<String, Object> getResultMap(List<?> result) {
return getResult(result);
}
/**
* 功能描述：获取分页组件调用好以后的结果
*
* @param result
* @return
*/
public static HashMap<String, Object> getResult(List<?> result) {
PageInfo<?> pageInfo = new PageInfo<>(result);
HashMap<String, Object> res = new HashMap<>(4);
res.put("page", pageInfo.getPageNum());
res.put("size", pageInfo.getPageSize());
res.put("total", pageInfo.getTotal());
res.put("rows", pageInfo.getList());
return res;
}
public static void startPageObject(Map<String, Object> reqMap) {
int page = Integer.parseInt(reqMap.getOrDefault("page", "1").toString());
int size = Integer.parseInt(reqMap.getOrDefault("size", "20").toString());
PageHelper.startPage(page, (size > 0 && size <= 500) ? size : 20);
}}6、接着我们需要写一个基于分页插件的工具类，该工具类用来操作我们分页插件的操作的结果
//分页插件工具类
public class PageUtil {
private PageUtil() {
}
public static void startPage(Map<String, String> reqMap) {
int page = Integer.parseInt(reqMap.getOrDefault("page", "1"));
int size = Integer.parseInt(reqMap.getOrDefault("size", "20"));
//第一个参数是说明是第几页，第二个参数是我们每页显示的条数，
// 如果我们前端传进来的size是在【0，500】之间，那么二元表达式
//的结果是true，则每页显示的row是size，若我们传进来的size不是
// 在区间内，那么size默认为每页20
PageHelper.startPage(page, (size > 0 && size <= 500) ? size : 20);
}
@Deprecated
public static HashMap<String, Object> getResultMap(List<?> result) {
return getResult(result);
}
/**
* 功能描述：获取分页组件调用好以后的结果
*
* @param result
* @return
*/
public static HashMap<String, Object> getResult(List<?> result) {
PageInfo<?> pageInfo = new PageInfo<>(result);
HashMap<String, Object> res = new HashMap<>(4);
res.put("page", pageInfo.getPageNum());
res.put("size", pageInfo.getPageSize());
res.put("total", pageInfo.getTotal());
res.put("rows", pageInfo.getList());
return res;
}
public static void startPageObject(Map<String, Object> reqMap) {
int page = Integer.parseInt(reqMap.getOrDefault("page", "1").toString());
int size = Integer.parseInt(reqMap.getOrDefault("size", "20").toString());
PageHelper.startPage(page, (size > 0 && size <= 500) ? size : 20);
}
}7、在service层中实现分页查询的逻辑业务
public Page queryUser(TUser query) {
int current = query.getPage();
int pageSize = query.getRows();
// 调用我们的分页组件来实现我们的分页数据的查询
PageHelper.startPage(current, (pageSize > 0 && pageSize <= 500) ? pageSize : 20);
HashMap<String, Object> res = PageUtil.getResult(userDao.queryUser(query));
return new Page((List) res.get("rows"), (long) res.get("total"));}8、在controller层中实现我们queryUser的方法
@PostMapping("/queryUser")
@ResponseBody
public Page quertUser(TUser query) {
return userService.queryUser(query);
}9、在controller层实现一个页面跳转的方法，将页面跳转到我们的列表页面
@GetMapping("/toList")
public String toList() {
return "user/list";
}----------------------------以下为前端部分--------------------------
1、
easy_ui官方下载例子百度云自取
链接：https://pan.baidu.com/s/125b5nFEgavzg544JUCi7jA 提取码：8wqt
2、在WEB_INF底下创建views，在views底下创建user ，在user文件夹下创建list。Jsp
3、在该文件里引入我们easyui的js和css依赖如下
<% String path = request.getContextPath();%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="<%=path %>/themes/default/easyui.css">
<link rel="stylesheet" href="<%=path %>/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<!-- 引入中文依赖，若不引入则我们的页面展示的语言是英文 -->
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>4、在我们实现datagrid组件之前，我们需要完成组件布局，作为我们的查询页面。因此我们需要一个layout布局组件实现查询布局和一个datagrid布局。
<body style="padding: 0px;">
<div class="easyui-layout" style="width:99%;height:95%;">
<div id="search" region="north" split="true" style="width: 100%;height:100px;" title="查询">
查询组件
</div>
<div id="content" region="center" split="true" style="width: 100%;height:80%;">
datagrid组件
</div>
</div>
</body>
我们的layout组件是由north、west、center、east、south这几个布局共同组成，但是我们这边实际上只需要north、center,因此我们配置了2个布局，若使用了全部的布局，那么将可以看到以下的效果
接着我们在我们的这个list.jsp页面实现我们的datagrid效果，首先我们将我们刚刚前面的代码做下改造，改造如下：
<% String path = request.getContextPath();%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户维护</title>
<link rel="stylesheet" href="<%=path %>/themes/default/easyui.css">
<link rel="stylesheet" href="<%=path %>/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<!-- 引入中文依赖，若不引入则我们的页面展示的语言是英文 -->
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
// $(function () { });是jquery的入口函数，在整个页面都加载完成后开始加载里面的方法
$(function () {
//在整个页面都加载完成后，调用initGrid();的方法
initGrid();
});
function initGrid() {
$('#dg').datagrid({
//如果我们需要给我们的grid添加上按钮栏，我们可以直接加入toolbar这个标签，同时在这个标签上加上相应的按钮即可
toolbar: [{
//iconCls是我们的按钮图标，现在用的是easyui自带的按钮图标，如果我们使用自己定义好的，那么可以引入自己的css样式
iconCls: 'icon-add',
//按钮的名称
text: '添加',
//点击这个按钮的时候调用的方法
handler: function () {
alert("这个是一个增加的按钮");
}
}, '-', {
iconCls: 'icon-edit',
text: '修改',
handler: function () {
alert("这个是修改的按钮")
}
}],
//true表示当前的表只允许单选
singleSelect: true,
//当前提交的方式是post
method: 'post',
//后台响应的方法
url: '/user/queryUser',
//每页显示的数据大小
pageSize: 10,
//初始页所在页，基本上都是默认为1
pageNumber: 1,
//将paginnation 设为true就会显示分页栏，如果是false那么就不显示分页栏
pagination: true,
//设置初始排序的字段
sortName: 'loginAccount',
//设置初始排序的方式为降序desc，
sortOrder: 'desc',
//设置是否允许点击表头进行排序，我们此处设置好了允许点击表头进行排序，我们还需要在我们的
//columns里 的相应的字段加上sortable:true,那么这个字段次啊会支持点击表头进行排序
remoteSort: true,
//需要在前端显示的字段，此处根据后台我们返回的实体对象去做映射关系
columns: [[{
field: 'loginAccount', title: '登入账号', width: 200, sortOrder: true
},
//有时候我们希望前端展示的数据需要进行特殊处理后再展示出来，则我们只需要再需要特殊处理的字段前面加上formatter标签，同时在
//里面自定义我们需要展示的形式
{
field: 'loginPass',
title: '登入密码',
width: 300,
sortable: true,
formatter: function (value, row, index) {
// 此处我们将密码这个信息进行了转换，将其在前端的显示效果转换为了一个a标签，同时点击的时候调用了我们自己定义的operatePassword方法
// 那么在这个地方我们还可以做比如时间的特殊处理，例如我们返回的时间不是标准的年月日的时间，那么我们就可以在这里进行一次转换
// 例如我们系统中涉及到很多状态的值，但是我们保存在数据库的时候是1,2,3这种形式，但是我们展示给用户看的时候肯定是不可能使用这种形式，那么
// 我们就可以在这里做一个转换
var showHtml = "<a href='javascript:void(0)' onclick='operatePassword(\"" + value + "\")'>" + value + "\")'>" + value + "</a>";
return showHtml;
}
},
//通常我们在grid列表中有时候需要在某个地方加上相应的操作，那么我想这个时候就需要加上以下一列，我们
//按着自己的要求去来重新编写相应的展示和实现方式
{
field: 'operate',
title: '操作',
width: 300,
formatter: function (value, row, index) {
var operateHtml = "<a href='javascript:void(0)' onclick='operateRow(\"" + row.userId + "\")'>删除</a>";
return operateHtml;
}
}
]]
})
}
function operatePassword(obj) {
alert('操作密码')
}
function operateRow(obj) {
alert('操作删除')
}
</script>
</head>
<body style="padding: 0px;">
<div class="easyui-layout" style="width:99%;height:95%;">
<div id="search" region="north" split="true" style="width: 100%;height:100px;" title="查询">
查询组件
</div>
<div id="content" region="center" split="true" style="width: 100%;height:80%;">
<table id="dg"></table>
</div>
</div>
</body>
</html>
5、到此处，我们已经完成了分页的datagrid的集成，当我们点击上面的增删改的按钮的时候，会弹出alert框，说明我们的按钮已经集成进去了，剩下的就是具体的点击某个按钮的时候需要调用的相应的事件。
6、我们现在查询组件的按钮还是空的，所以我们现在可以先对查询组件按钮进行改造，将其改造为符合我们的搜索框
<form id="userForm" method="post">
<div style="margin-top: 15px;">
<!--
若想让我们的两个div在一行则我们只需要设置style的display的值为inline，那么我们的两个div就会处于一行，但是当我们设置了多个div处于一行
的时候，若是多个div超过了我们的长度，那剩下的div就会自动换行。
-->
<div style="display: inline">
<!-- 此处设置我们需要查询的字段的 -->
<input class="easyui-textbox" id="queryLoginAccount" style="width:300px;"
data-options="label:'用户名字:'">
</div>
<div style="display: inline">
<input class="easyui-textbox" id="queryLoginPass" style="width:300px;"
data-options="label:'用户密码:'">
</div>
<div style="display: inline">
<!-- 此处是我们输入查询条件以后响应的事件 -->
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="queryUser()"
style="width:80px">查询</a>
</div>
</div>
</form>7、接着我们再inintGrid方法中加入查询的参数，如下所示：
8、当我们点击输入3的时候，就会出现3的相关账户名的结果，如图所示
9、
9、接着我们修改我们的之前写在datagrid的toolbar中的增加的方法修改如下：
{
//iconCls是我们的按钮图标，现在用的是easyui自带的按钮图标，如果我们使用自己定义好的，那么可以引入自己的css样式
iconCls: 'icon-add',
//按钮的名称
text: '添加',
//点击这个按钮的时候调用的方法
handler: function () {
alert("这个是一个增加的按钮");
// 我们的所有需要在页面弹出框的地方都可以使用dialog组件
$('#addUser').dialog({
title: "弹出框标题",
//弹出框的默认单位是px
width: 400,
height: 200,
//是否关闭，设置为false，如果设置为true，那么将无法看到弹出框
closed: false,
//是否保存缓存
cache: false,
//响应到后台的一个地址，这个地址应该是跳转到某一个页面
href: '/user/toAdd',
modal: true,
//配置dialog的按钮，我们根据需要进行配置，目前只配置了保存和去取消按钮
buttons: [{
test: "保存",
handler: function () {
// 当我们点击dialog上的保存按钮的时候触发的事件userAddForm这个就是我们在add.jsp页面上定义的form表单的id
//因为我们是使用dialog来加载这个页面的，因此add。jsp再加载完成后是和我们的list.jsp是再一个页面的，所以我们可以通过id来控制这个表单页面
$('#userAddForm').form('submit', {
//响应后台数据提交的地址
url: '/user/saveUser',
//在我们提交数据之前，需要对提交的数据做一次验证，，验证使用的是easyui的表单验证组件，已经在add.jsp中设置好了，，
//因此我们可以直接吊用表单验证的方法进行验证，若是验证不通过，则告诉错误信息，若是验证通过，则进行正常提交
onSubmit: function () {
var isValid = $(this).form('validate');
if (!isValid) {
alert("验证不通过");
}
return isValid;
},
//将数据提交到后台后成功的操作
success: function (data) {
alert("提交成功");
queryUser();
$('#addUser').dialog("closed")
}
})
}
}, {
text: '关闭',
handler: function () {
//关闭当前的对话框
$("addUser").dialog("closed");
}
}
]
})
}
}10、写好了这个我们先需要在我们的后端实现我们增加的逻辑代码，由于我们使用的是tk.mybatis插件，我们的dao已经继承了这个插件的接口类，因此我们不需要在我们的dao层编写任何的逻辑代码，我们在userService层添加用户的方法即可，如下： /*
实现保存用户的方法
*/
public Map<String, Object> saveUser(TUser entity) {
Map<String, Object> result = new HashMap<>(2);
if (userDao.insert(entity) > 0) {
result.put("success", true);
result.put("msg", "新增用户成功");
} else {
result.put("success", false);
result.put("msg", "新增用户失败");
}
return result;
}11、我们需要在controller层实现我们增加数据的方法和实现页面跳转的方法
//实现增加页面的跳转
@GetMapping("/toAdd")
public String toAdd() {
return "user/add";
}
//实现数据的保存
@PostMapping("saveUser")
@ResponseBody
public Map<String, Object> saveUser(TUser entity) {
return userService.saveUser(entity);
}12、重新启动我们的工程，使用我们的新增功能
13、填写我们的修改功能，首先我们的修改
接着我们修改我们的toolbar中的修改的方法如下：
获取当前列表中选中的数据,该方法是返回所有选中的数据，返回的结果是一个集合
{
iconCls: 'icon-edit',
text: '修改',
handler: function () {
var selections = $("#dg").datagrid("getSelections");
if(selections.length>1){
alert("请选择一条数据进行删除！")
return false;
}
$('#updateUser').dialog({
title: '修改用户',
width: 400,
height: 200,
closed: false,
cache: false,
href: '/user/toEditUser?userId='+selections[0].userId,
modal: true,
buttons:[
{
text:'保存',
handler:function(){
$('#userAddForm').form('submit', {
url:'/user/updateUser',
onSubmit: function() {
var isValid = $(this).form('validate');
if (!isValid){
alert('验证不通过')
}
return isValid;
},
success: function(){
alert('提交成功');
queryUser();
$('#updateUser').dialog('close');
}
});
}
},
{
text:'关闭',
handler:function(){
$('#updateUser').dialog('close');
}
}
]
});
}
}接着在list.jsp的页面底部添加上一下这行代码用来承载更新的dialog
14、到此处我们就完成了前端的更新的代码，接着我们开始编写后端的代码，虽然tk.mybatis插件已经给我们集成好了更新方法，但是很多时候我们的更新方法都只针对特别的几个字段进行更新因此我们需要重新再我们的mybatis_user.xml增加一个我们的更新方法，方法如下：
<update parameterType="com.easyui.demo.sys.entity.TUser">
update t_user set loginAccount = #{loginAccount} ,loginPass=#{loginPass} where userId = #{userId}
</update>
/**接着在我们的UserDao的编写更新接口如下：
* 功能描述：根据用户的主键来更新用户数据
* @param entity
* @return
*/int updateUser(TUser entity);
接着在我们的UserService编写我们的更新方法，代码如下： /**
* 功能描述：更新用户数据
* @param entity
* @return
*/
public Map<String,Object> updateUser(TUser entity){
Map<String,Object> result = new HashMap<>(2);
if(userDao.updateUser(entity)>0){
result.put("success",true);
result.put("msg","更新用户成功");
}else{
result.put("success",false);
result.put("msg","更新用户失败");
}
return result;
}15、同时我们在更新数据的时候，我们的前端需要展示数据，因此我们后端需要有一个方法来获取数据，因此我们的service层还需要增加一个根据用户流水来获取用户数据的方法：/**
* 功能描述：根据用户的流水ID来获取用户数据
* @param entity
* @return
*/
public TUser getUser(TUser entity){
return userDao.selectByPrimaryKey(entity);
}接着我们编写我们的UserController在这里我们需要实现两个方法一个是跳转到我们的更新页面的方法toEditUser和更新数据的方法updateUser方法： /**
* 功能描述：更新用户数据
* @param entity
* @return
*/
@PostMapping("updateUser")
@ResponseBody
public Map<String,Object> updateUser(TUser entity){
return userService.updateUser(entity);
}
/**
* 功能描述：跳转到修改用户信息页面
*
* @param entity
* @return
*/
@GetMapping("toEditUser")
public String toEditUser(TUser entity, Model model) {
entity = userService.getUser(entity);
// 我们需要传到前端的数据则我们直接使用model以下的方式来实现往前端发送数据
model.addAttribute("entity", entity);
return "/user/update";
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
