在之前的文章当中我们介绍了springBoot+ MP的结合使用，了解到了MP的简化代码的方面，但是如果你想要自定义的分页查询呢，我们知道mybatis--plus提供的selectPage方法，只能取查由你封装好的Page去查询，这样一来若是我们想自定义查询条件对结果进行分页，我们就得在mapper当中去自定义sql了，好了 我们直接步入正题：我们从前端到后端的方式来介绍整个分页的实现；
首先我们在用jqGrid的方式用js来操作页面上面的表单，用vue来实现参数的传递已经功能方法的定义：
我们首先来看一下页面代码：
<!DOCTYPE html>
<html>
<head>
<title>设备表</title>
</head>
<body>
<div id="rrapp" v-cloak>
<div class="grid-btn">
<div class="form-group col-sm-1">
</div>
//-----在这里定义一个查询条件的表格，查询条件分别是名称，地区编号三个
<table style="margin: 20px">
<td style="width: 40px"></td>
<td>名称：</td>
<td style="width: 150px">
<input type="text" class="form-control" v-model="q.groupName" placeholder="名称">
</td>
<td style="width: 40px"></td>
<td>地区：</td>
<td style="width:150px;">
<input type="text" class="form-control" v-model="q.address" placeholder="地区">
</td>
<td style="width: 40px"></td>
<td>编号：</td>
<td style="width:150px;">
<input type="text" class="form-control" v-model="q.deviceNo" placeholder="编号">
</td>
<td style="width: 40px"></td>
<td>
<a type="button" class="btn btn-default" @click="query">搜 索</a>
</td>
</table>
<a class="btn btn-primary" @click="back">返 回</a>
<#if shiro.hasPermission("sys:conGame:add")>
<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i> 添加</a>
</#if>
//这个就是已jqGrid命名的表格
<div>
<table id="jqGrid"></table>
//下面这个是分页器
<div id="jqGridPager"></div>
</div>
//引入我们的js文件
<script src="${request.contextPath}/statics/js/modules/app/addAppDevice.js?_${.now?long}">
</script>
</body>
</html>下面是相应的js文件：
$(function () {
$("#jqGrid").jqGrid({
//下面是jqGrid自带的属性，可以去查看上一篇博文
url: baseURL + 'app/gdevice/allDevice/' + 0,
datatype: "json",
//这里定义的就是所要操作的表格，若是想要添加显示的属性，可以在这里添加
colModel: [
{label: 'deviceId', name: 'deviceId', index: 'deviceId', width: 30, key: true},
{label: '编号', name: 'deviceNo', index: 'deviceNo', width: 80},
{label: '名称', name: 'deviceName', index: 'deviceName', width: 80},
{label: '地区', name: 'address', index: 'address', width: 120},
],
viewrecords: true,
height: 385,
//分页器的定义，下面的意思就是一次显示十行，初次加载可以选择10，30，50
rowNum: 10,
rowList: [10, 30, 50],
rownumbers: true,
rownumWidth: 25,
autowidth: true,
//在列表前，加上可以多选
multiselect: true,
//页面上相应分页器的名称
pager: "#jqGridPager",
//设置读取后端数据的方式，以及赋值
jsonReader: {
root: "allDevice.list",
page: "allDevice.page",
total: "allDevice.pages",
records: "allDevice.totalPage"
},
//设置一些每次必传的参数，如基本的分页参数，当然其他的也是可以的
prmNames: {
page: "page",
rows: "limit",
order: "order",
},
gridComplete: function () {
//隐藏grid底部滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
}
});
});
//创建一个vue容器，并将其命名为vm
var vm = new Vue({
//设置vue作用的页面范围，也就是设置以下定义数据以及方法的使用范围
el: '#rrapp',
//下面定义一些基本的页面数据
data: {
showList: true,
title: null,
//这个就是船舰的用于存储查询条件的实体
q: {
address: '', deviceName: '', deviceNo: '', },
isSearch: false,
params:{},
},
//大家知道vue是由初次加载页面时执行的函数，就是create,在这里我们可以去接收，在jqGrid初次加载之后，想要再次去获取初次加载时传递的数据时，我们可以将其存储在vue定义的数据当中，已方便后面的使用
created(){
this.groupId = Cookies.get("id")
// console.log("添加到分组ID",this.groupId)
},
//下面就是定义方法的地方，所有在vue操作范围之内的方法都可以定义在这个地方以供调用
methods: {
//这个就是我们在页面定义的查询的方法
query: function () {
vm.isSearch = true;
console.log(vm.q)
vm.reload();
},
//返回上级页面的方法
back: function(){
Cookies.set("id",this.groupId,{expires: new Date(new Date().getTime() + 5 * 1000)});
window.location.href = baseURL + "modules/app/qdDevice2.html"
},
//再次加载页面数据的方法，
reload: function (event) {
if (!vm.isSearch) {
var page = $("#jqGrid").jqGrid('getGridParam', 'page');
} else {
var page = 1;
}
//在这里我们可以去再次定义在初次加载时定义在jqGrid内部的属性，用的就是'setGridParam'这个方法
//关于其他的方法 大家可以查阅上一篇博文
$("#jqGrid").jqGrid('setGridParam', {
//如果请求地址时一样的这里就不用去再次设置请求地址
//需要注意的一个问题就是，postData的数据可能会出现积累，如果不想传递的数据过多 或者时上次传递的数据与这一次的由影响或者冲突的时候可已用delete方法将之前的数据清空，具体使用的形式去参照上一篇的api
url: baseURL + 'app/gdevice/allDevice/' + vm.q.key + '/',
postData: {
groupName: vm.q.groupName,
address: vm.q.address,
deviceNo: vm.q.deviceNo
},
//传递基本得分页参数
page: page,
}).trigger("reloadGrid");
vm.isSearch = false;
}
}
});以上就是前端页面和js下相关函数的定义：
当你在查询的时候你就可以发现传递的参数，如下图：
下面我们来看依稀后端代码：
首先时controller:
@RestController
@RequestMapping("app/gdevice")
public class AppGroupDeviceController {
@Autowired
private AppGroupDeviceService appGroupDeviceService;
//查询所有设备，关联分组信息
@RequestMapping("/allDevice")
// @RequiresPermissions("sys:gdevice:list")
public R getAllDevice(@RequestParam Map<String, Object> params) {
PageUtils page = appGroupDeviceService.selectAllDevice(params, key);
return R.ok().put("allDevice", page);
}
}
//R时我定义的统一返回数据的一种方式
//直接调用我们service定义的方法
//关于springBoot 与mybatis的结合，以及相应的注解使用可以去参阅博文SpringBoot+mybatis-plus//下面我们直接来看service的实现类
/**
* @className AppGroupDeviceServiceImpl
* @Date2019/3/5 18:23
* @created by Sulliven
*/
@Service("AppGroupDeviceService")
public class AppGroupDeviceServiceImpl extends ServiceImpl<AppGroupDeviceDao,AppGroupDeviceEnitity> implements AppGroupDeviceService {
@Autowired
private AppGroupDeviceDao appGroupDeviceDao;
@Override
@Override
public PageUtils selectAllDevice(Map<String, Object> params, Long key) {
List<AppRuturnDeviceEntity> appRuturnDeviceEntities =null;
int total=0;
//将前端传递过来的参数，定义成一个基本的查询参数。方便的mapper当中去提取
Query query = new Query(params);
//直接用dao去查询
appRuturnDeviceEntities = appGroupDeviceDao.selectAllDevice(query);
//并且查询出当前记录数的total,方便返回分页参数，同样定义一个获取总数分的方法，
//它不想nodejs直接可以selelctAndCountAll来获取数据以及总数
//所以还是乖乖的查吧
total = appGroupDeviceDao.selectAllCount(query);
//将查询道德数据与，前端传递的参数，以取构建返回参数
// PageUtils 是我自定义的一个工具类
PageUtils page = new PageUtils(appRuturnDeviceEntities, total, query.getLimit(), query.getCurrPage());
return page;
}
}dao层我们就没必要看了就是接口+抽象方法的定义我们直接来看mapper当中sql的编写。但是要注意在dao与mapper当中
包+方法名称的对应
<?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.dlc.modules.app.dao.AppGroupDeviceDao">
//首先定义一个公共的查询条件
//这样在之后的查询当中就不用去重复的书写
<sql id="condition">
1=1
<if test="deviceNo !=null and deviceNo != ''">
AND b.device_no like '%${deviceNo}%'
</if>
<if test="groupName !=null and groupName != ''">
and b.device_name like '%${groupName}%'
</if>
<if test="address !=null and address !=''">
and b.address like '%${address}%'
</if>
<if test="offset != null and limit != null">
limit #{offset}, #{limit}
</if>
</sql>
//根据条件去连表查询部分属性的sql
<select id="selectAllDevice" resultType="com.dlc.modules.app.entity.AppRuturnDeviceEntity">
select
b.device_id,
b.device_no,
b.device_name,
b.address,
b.status,
a.group_id
from app_group_device a
right join qd_device b on a.device_id=b.device_id
//使用id命名的方式去加入之前定义的公共条件
<where>
<include refid="condition"></include>
</where>
</select>
//查询所有记录数的sql
<select id="selectAllCount" resultType="java.lang.Integer">
select
COUNT(*)
from app_group_device a
right join qd_device b on a.device_id=b.device_id
<where>
<include refid="condition"></include>
</where>
</select>
</mapper>
以上就是一个简单的查询的实现从前端到后端，希望大家有一个大概的了解，没有浪费您宝贵的时间；
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
