layUi
通用实体
package com.aaa.util; /** * @Author: 0808 * @Date: 2020/7/13 0013 10:39 * @Version 1.0 * 常量类 */ public class MyConstants { /**保存操作*/ public static final String SAVE_OPERATION="save"; /**修改操作*/ public static final String UPDATE_OPERATION="update"; /**加密算法*/ public static final String ALGORITHM_NAME="MD5"; /**加密次数*/ public static final int HASH_ITERATIONS=1000; /** 操作成功信息 */ public static final String OPERATION_SUCCESS_MESSAGE="操作成功"; /** 操作成功代码 */ public static final int OPERATION_SUCCESS_CODE=0; /** 操作失败信息 */ public static final String OPERATION_FAIL_MESSAGE="操作失败"; /** 操作失败代码 */ public static final int OPERATION_FAIL_CODE=1; /** 柴油（大型加油站）阈值第一条数据 */ public static final int DIESELOIL_BIG=0; /** 柴油（中型加油站）阈值第二条数据 */ public static final int DIESELOIL_BETWEEN=1; /** 柴油（小型加油站）阈值第三条数据 */ public static final int DIESELOIL_SMALL=2; /** 汽油（大型加油站）阈值第四条数据 */ public static final int GASOLINEOIL_BIG=3; /** 汽油（中型加油站）阈值第五条数据 */ public static final int GASOLINEOIL_BETWEEN=4; /** 汽油（小型加油站）阈值第六条数据 */ public static final int GASOLINEOIL_SMALL=5; /** 变量为0的值 */ public static final int INTVALUE_ZERO=0; }
状态码
package com.cws.db_car.entity; import lombok.Data; import java.util.List; /** * @Author: 0808 * @Date: 2020/7/10 0010 16:10 * @Version 1.0 */ @Data public class LayUiTable { private int code; private String msg; private Integer count; private List<?> data; }
查询&&模糊&&分页
/** * 查询所有汽车和模糊查询分页 * @param page * @param limit * @param searchTypename * @return */ @RequestMapping("/listCar") @ResponseBody public LayUiTable listCar(Integer page, Integer limit , String searchTypename) { LayUiTable table = new LayUiTable(); //多条件查询所需要的集合 Map<String ,Object> condition= new HashMap(16); Wrapper wrapper = new EntityWrapper(); //添加模糊查询的条件 if (null != searchTypename && !"".equals(searchTypename)) { condition.put("typename", searchTypename); } int i = tCarService.selectCount(wrapper); if(i>0){ //获取当前的系统毫秒数 Page<TCarVo> pageInfo = new Page(page, limit); List<TCarVo> tCarVoList = tCarService.selectList(pageInfo, condition); //从分页结果中提取list集合 table.setCode(MyConstants.OPERATION_SUCCESS_CODE); table.setMsg(MyConstants.OPERATION_SUCCESS_MESSAGE); table.setData(tCarVoList); table.setCount(i); } return table; }
/**
* 修改用户信息
*
* @param
* @return
*/
@RequestMapping("/updateInfo")
@ResponseBody
public boolean updateUserInfo(TCar tCar) {
return tCarService.updateById(tCar);
}
/**
* 添加用户信息
*
* @param
* @return
*/
@RequestMapping("/savaInfo")
@ResponseBody
public boolean savaInfo(TCar tCar) {
return tCarService.insert(tCar);
}
/**
* 批量删除
*
* @param
* @return
*/
@RequestMapping("/deleteCar")
@ResponseBody
public boolean deleteCar(@RequestBody List<TCar> tCarList) {
List list = new ArrayList();
for (int i = 0; i < tCarList.size(); i++) {
list.add(tCarList.get(i).getCarid());
}
//System.out.println(list+"=======================");
return tCarService.deleteBatchIds(list);
}
前台页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>查询所有列车</title>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script th:src="@{/layui/layui.js}"></script>
</head>
<body>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"
hasPermission="system:user:remove">删除</a>
<!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" >删除</a>-->
</script>
<!--=============================条件查询==================================-->
<div class="layui-card" style="padding-top: 30px">
<form class="layui-form">
<div class="layui-inline">
<label class="layui-form-label">汽车类型</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="searchTypename" name="searchTypename" placeholder="汽车类型"
width="80px">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn" lay-submit="search_submits" lay-filter="search_filter">查询</button>
<button id="search_reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
</div>
<div class="layui-fluid">
<div class="layui-card">
<table id="demo" lay-filter="userTable"></table>
</div>
</div>
<!--===========================================更新用户信息==============================================================-->
<form class="layui-form" action="" id="update_user_form" style="display: none" lay-filter="update_user_form">
<!--隐藏输入框，保存主键-->
<input type="hidden" name="carid">
<div class="layui-form-item">
<label class="layui-form-label">汽车编号</label>
<div class="layui-input-inline">
<input type="text" name="carno" required lay-verify="required" placeholder="汽车编号" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">汽车类型</label>
<div class="layui-input-block" >
<select name="cartype">
<option th:each="list:${tCartypeList}" th:value="${list.typeid}" th:text="${list.typename}"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">汽车库存</label>
<div class="layui-input-inline">
<input type="text" name="carstatus" required lay-verify="required" placeholder="汽车库存" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">描述</label>
<div class="layui-input-inline">
<input type="text" name="remark" required lay-verify="required" placeholder="描述" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">汽车价格</label>
<div class="layui-input-inline">
<input type="text" name="caretel" required lay-verify="required" placeholder="汽车价格" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formUpdateUser">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!--===========================================添加用户信息==============================================================-->
<form class="layui-form" action="" id="save_user_form" style="display: none" lay-filter="save_user_form">
<!--隐藏输入框，保存主键-->
<input type="hidden" name="carid">
<div class="layui-form-item">
<label class="layui-form-label">汽车编号</label>
<div class="layui-input-inline">
<input type="text" name="carno" id="carno" required lay-verify="required" placeholder="汽车编号" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">汽车类型</label>
<div class="layui-input-block" >
<select name="cartype">
<option th:each="list:${tCartypeList}" th:value="${list.typeid}" th:text="${list.typename}"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">汽车库存</label>
<div class="layui-input-inline">
<input type="text" name="carstatus" required lay-verify="required" placeholder="汽车库存" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">描述</label>
<div class="layui-input-inline">
<input type="text" name="remark" required lay-verify="required" placeholder="描述" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">汽车价格</label>
<div class="layui-input-inline">
<input type="text" name="caretel" required lay-verify="required" placeholder="汽车价格" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addUser">添加</button>
<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteBatch">删除</button>
</div>
</script>
<script>
layui.use(['layer', 'form', 'table', 'jquery'], function () {
var table = layui.table;
var form = layui.form;
var $ = layui.jquery;
//第一个实例
var myTable = table.render({
elem: '#demo'
, id: 'tableReload'//重载数据表格
, height: 420
, url: '/tCar/listCar' //数据接口
, page: true //开启分页
, limit: 5//默认一页显示5条数据
, limits: [5, 10, 15, 20, 50, 100]//默认一页显示5条数据
, toolbar: '#toolbarDemo'//此处的id是html代码段
, cols: [
[ //表头
{field: 'carid', title: '复选框编号', sort: true, fixed: 'left', checkbox: true}
, {field: 'carno', title: '汽车编号', sort: true, width: '7%',}
, {field: 'typename', title: '汽车类型', width: '9%',
templet: function (d) {
return d.tcartype.typename;
}
}
, {field: 'carstatus', title: '汽车库存', width: '7%',}
, {field: 'remark', title: '描述'}
, {field: 'caretel', title: '汽车价格'}
, {title: '操作', width: 235, toolbar: '#barDemo'}
]
]
});
//监听头工具栏事件
table.on('toolbar(userTable)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id)
, data = checkStatus.data; //获取选中的数据
switch (obj.event) {
case 'addUser':
layer.open({
title: '添加员工',
type: 1,
content: $('#save_user_form'),
area: ['700px', '530px']
});
break;
case 'update':
if (data.length === 0) {
layer.msg('请选择一行');
} else if (data.length > 1) {
layer.msg('只能同时编辑一个');
} else {
layer.alert('编辑 [id]：' + checkStatus.data[0].id);
}
break;
case 'deleteBatch':
if (data.length === 0) {
layer.msg('请选择一行');
} else {
//对于删除或者是其他敏感操作，一定要让用户确认。
layer.confirm('确定要删除吗？', function () {
//请求后台批量删除接口
$.ajax({
url: '/tCar/deleteCar',
dataType: 'json',
contentType: "application/json;charset=UTF-8",
type: 'POST',
data: JSON.stringify(data),//将js对象转成json串传入到后台
success: function (result) {
layer.closeAll();//关闭对话框
layer.msg("删除成功");
myTable.reload();//重新加载表格数据
}
})
})
}
break;
}
;
});
//监听保存用户表单的提交
form.on('submit(formDemo)', function (data) {
$.ajax({
url: '/tCar/savaInfo',
dataType: 'json',
type: 'POST',
data: data.field,
success: function (result) {
layer.closeAll();//关闭对话框
layer.msg("添加成功");
myTable.reload();//重新加载表格数据
}
})
return false;
});
//监听修改用户表单的提交
form.on('submit(formUpdateUser)', function (data) {
$.ajax({
url: '/tCar/updateInfo',
dataType: 'json',
type: 'POST',
data: data.field,
success: function (result) {
layer.closeAll();//关闭对话框
layer.msg("修改成功");
myTable.reload();//重新加载表格数据
}
})
return false;
});
//登录名校验
$("#carno").blur(function () {
var node = this;
console.log(node)
$.ajax({
type: "POST",
url: "/tCar/checkCarno",
async: false, //改为同步请求
data: {carno: node.value},
dataType: 'json',
success: function (data) {
if (data.code == 0) {
} else {
node.focus();
layer.msg(data.msg, {icon: 5});
}
}
});
});
// 获取选中复选框项
function selectCheckeds(name) {
var checkeds = "";
// 保存用户
if (name != null) {
$('input:checkbox[name="' + name + '"]:checked').each(function (i) {
if (0 == i) {
checkeds = $(this).val();
} else {
checkeds += ("," + $(this).val());
}
});
//修改用户
} else {
$('.role_check:checked').each(function (i) {
if (0 == i) {
checkeds = $(this).val();
} else {
checkeds += ("," + $(this).val());
}
});
}
return checkeds;
}
//监听查询表单的提交事件
form.on('submit(search_filter)', function (data) {
var formData = data.field;
//数据表格重载
table.reload('tableReload', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {//这里传参 向后台
searchTypename: formData.searchTypename,
}
});
return false;//false：阻止表单跳转 true：表单跳转
});
//监听重置密码表单的提交事件
form.on('submit(formResetPassword-flter)', function (data) {
$.ajax({
url: '/user/resetPassword',
dataType: 'json',
type: 'POST',
data: data.field,
success: function (result) {
layer.closeAll();//关闭对话框
layer.msg(result.msg);
}
})
return false;
});
//监听行工具事件
table.on('tool(userTable)', function (obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === 'detail') {
layer.msg('查看操作');
} else if (layEvent === 'delete') {
layer.confirm('真的删除行么', function (index) {
/* obj.del(); //删除对应行（tr）的DOM结构
layer.close(index);*/
//向服务端发送删除指令
//console.log(data);
$.ajax({
url: '/user/deleteUser',
dataType: 'json',
type: 'POST',
data: {userId: data.userId},
success: function (result) {
layer.closeAll();//关闭对话框
layer.msg(result.msg);
myTable.reload();//重新加载表格数据
}
})
});
} else if (layEvent === 'resetPassword') {
form.val('reset_password_form', {
"userId": data.userId});
layer.open({
title: '重置密码',
type: 1,
content: $('#reset_password_form'),
area: ['400px', '150px']
});
} else if (layEvent === 'edit') {
//将修改前的数据赋值给修改表单
form.val('update_user_form', {
"carid": data.carid
, "carno": data.carno // "name": "value"
, "cartype": data.cartype
, "carstatus": data.carstatus
, "remark": data.remark
, "caretel": data.caretel
});
//设置checkbox回显
$.ajax({
url: '/tCar/updateInfo',
dataType: 'json',
type: 'POST',
data: {carid: data.carid},
success: function (result) {
console.log(result.data)
form.val('update_user_form', result.data);
}
});
layer.open({
title: '编辑用户',
type: 1,
content: $('#update_user_form'),
area: ['500px', '480px']
});
}
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号