使用Springboot、mybatis、druid、lombok、json-lib、mysql、thymeleaf等技术做了简单的查询数据列表功能，下面将主要的代码记录如下：
一、vo
package com.gl.vo;
import java.util.Date;
import org.springframework.format.annotation.DateTimeFormat;
import lombok.Data;
@Data
public class EmpQuery {
private String xm;
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date startDate;
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date endDate;
}二、mapper
<!-- 带有条件的查询 -->
<select id="getEmpList" resultType="com.gl.model.Txl" parameterType="com.gl.vo.EmpQuery">
select * from txl
<include refid="getEmpListWhere"></include>
</select>
<sql id="getEmpListWhere">
<where>
<if test="xm != null">
xm like '%' #{xm} '%'
</if>
<if test="startDate != null">
<![CDATA[
and csrq >= #{startDate}
]]>
</if>
<if test="endDate != null">
<![CDATA[
and csrq<= #{endDate}
]]>
</if>
</where>
</sql>三、service
//按条件查询，返回layui需要的数据格式
public LayuiTableResultUtil<List> getEmpList(EmpQuery empQuery) {
List<Txl> listtxList = txlMapper.getEmpList(empQuery);
Integer count = countEmpList();
LayuiTableResultUtil<List> list = new LayuiTableResultUtil<List>("成功", listtxList, 0, count);
if (listtxList != null) {
return list;
}
return null;
}四、controller
// 查询后，返回JSON,给Layui数据
@ResponseBody
@GetMapping("/emplist")
public LayuiTableResultUtil<List> getEmpList(EmpQuery empQuery) {
LayuiTableResultUtil<List> list = txlService.getEmpList(empQuery);
return list;
}五、thymeleaf
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
<style>
.div-content {
background-color: white;
border-radius: 15px;
padding: 15px;
}
.table-search-fieldset {
margin: 0;
border: 1px solid #e6e6e6;
padding: 10px 20px 5px 20px;
color: #6b6b6b;
}
.layui-layout-body{
overflow-y:auto;
}
</style>
</head>
<body>
<div class="div-content">
<form class="layui-form layui-form-pane" action="" id="form-search">
<fieldset class="table-search-fieldset">
<legend>搜索条件</legend>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">员工姓名:</label>
<div class="layui-input-inline" style="width: 150px;">
<input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label">出生日期:</label>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="startDate" id="startDate" placeholder="起始日期" autocomplete="off" class="layui-input date">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="endDate" id="endDate" placeholder="终止日期" autocomplete="off" class="layui-input date">
</div>
</div>
<button id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
<i class="layui-icon layui-icon-fonts-clear"></i>
清空条件
</button>
</div>
</fieldset>
</form>
<table id="table-emp" lay-filter="table-emp-filter"></table>
</div>
<script th:src="@{/layuiadmin/layui/layui.js}" src="../layuiadmin/layui/layui.js"></script>
<script th:inline="javascript">
function refreshTable() {
$("#form-reset").click();
$("#btn-search").click();
}
layui.use(['laydate', 'table', 'form'], function () {
var laydate = layui.laydate;
var table = layui.table;
var form = layui.form;
//执行一个laydate实例
laydate.render({
elem: '#endDate' //指定元素
,trigger: 'click'
});
laydate.render({
elem: '#startDate' //指定元素
,trigger: 'click'
});
table.render({
elem: '#table-emp'
, url: '/emplist' //数据接口
/* ,parseData:function(res){
console.log(res);
return{
"code":0,
"msg":"",
"count":10000000,
"data":res
};
} */
, cols: [[ //表头
{type: "checkbox", width: 60}
, {field: 'id', title: '员工编号', align: 'center'}
, {field: 'xm', title: '姓名', align: 'center'}
, {field: 'lxdh', title: '联系电话', align: 'center'}
, {field: 'csrq', title: '生日',align: 'center'}
]]
});
form.on('submit(btn-search-filter)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
table.reload('table-emp', {
where: { //设定异步数据接口的额外参数，任意设
xm: data.field.name,
startDate: data.field.startDate,
endDate: data.field.endDate
}
,page: {
curr: 1 //重新从第 1 页开始
}
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>
</body>
</html>