一套增删改查，打完收工。
layui版本：2.4.5 +
默认请求,分页。
/rest_address?page=1&limit=1
json数据格式要求. 参数说明文档
https://www.layui.com/doc/modules/table.html#cols
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>用户管理</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
<link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
</head>
<body class="childrenBody">
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
<form class="layui-form" method="post" id="searchFrm">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户姓名:</label>
<div class="layui-input-inline">
<input type="text" name="realname" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">登陆名称:</label>
<div class="layui-input-inline">
<input type="text" name="loginname" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户地址:</label>
<div class="layui-input-inline">
<input type="text" name="address" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户电话:</label>
<div class="layui-input-inline">
<input type="text" name="phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">身份证号:</label>
<div class="layui-input-inline">
<input type="text" name="identity" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label"> </label>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-normal layui-icon layui-icon-search" id="doSearch">查询</button>
<button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button>
</div>
</div>
</div>
</form>
</blockquote>
<!-- 搜索条件结束 -->
<!-- 数据表格开始 -->
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<div style="display: none;" id="userToolBar">
<button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
</div>
<div id="userBar" style="display: none;">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="resetUserPwd">重置密码</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="selectUserRole">分配角色</a>
</div>
<!-- 数据表格结束 -->
<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
<form class="layui-form" lay-filter="dataFrm" id="dataFrm">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户姓名:</label>
<div class="layui-input-inline">
<input type="hidden" name="userid">
<input type="text" name="realname" lay-verify="required" placeholder="请输入用户姓名" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">登陆名称:</label>
<div class="layui-input-inline">
<input type="text" name="loginname" lay-verify="required" placeholder="请输入用户登陆名称" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">身份证号:</label>
<div class="layui-input-inline">
<input type="number" name="identity" lay-verify="required|identity" placeholder="请输入用户身份证号" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户地址:</label>
<div class="layui-input-inline">
<input type="text" name="address" placeholder="请输入用户地址" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户电话:</label>
<div class="layui-input-inline">
<input type="number" name="phone" lay-verify="required|phone" placeholder="请输入用户电话" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户描述:</label>
<div class="layui-input-inline">
<input type="text" name="position" placeholder="请输入用户描述" autocomplete="off"
class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户性别:</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="1" checked="checked" title="男">
<input type="radio" name="sex" value="0" title="女">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否可用:</label>
<div class="layui-input-inline">
<input type="radio" name="available" value="1" checked="checked" title="可用">
<input type="radio" name="available" value="0" title="不可用">
</div>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
<button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
</div>
</div>
</form>
</div>
<!-- 添加和修改的弹出层结束 -->
<!-- 用户分配角色的弹出层开始 -->
<div style="display: none;padding: 10px" id="selectUserRole">
<table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
</div>
<!-- 用户分配角色的弹出层结束 -->
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
var tableIns;
layui.use([ 'jquery', 'layer', 'form', 'table'], function() {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
// layui dtree 整合的插件dtree
//渲染数据表格
tableIns=table.render({
elem: '#userTable' //渲染的目标对象
,url:'user/paging' //数据接口
, where: {
'status': '0'} // 查询带上的数据
,title: '用户数据表'//数据导出来的标题
,toolbar:"#userToolBar" //表格的工具条
,height:'full-230'
,cellMinWidth:200 //设置列的最小默认宽度
,page: 1 //是否启用分页, limits: [10, 20, 30]
,limits: [10, 20, 30]
,limit: 10//默认采用3
,cols: [[ //列表数据
{
field:'userid', title:'ID',align:'center',width:'50'}
,{
field:'realname', title:'用户姓名',align:'center'}
,{
field:'loginname', title:'登陆名',align:'center'}
,{
field:'identity', title:'身份证号',align:'center'}
,{
field:'phone', title:'用户电话',align:'center'}
,{
field:'address', title:'用户地址',align:'center'}
,{
field:'position', title:'描述',align:'center'}
,{
field:'sex', title:'性别',align:'center',templet:function(d){
return d.sex=='1'?'<font color=blue>男</font>':'<font color=red>女</font>';
}}
,{
field:'pwd', title:'密码',align:'center',templet:function(d){
return "******";
}}
,{
field:'available', title:'是否可用',align:'center',templet:function(d){
return d.available=='1'?'<font color=blue>可用</font>':'<font color=red>不可用</font>';
}}
,{
fixed: 'right', title:'操作', toolbar: '#userBar',align:'center',width:'260'}
]]
})
//模糊查询
$("#doSearch").click(function(){
var params=$("#searchFrm").serialize();
tableIns.reload({
url:"user/paging?"+params
})
});
//监听头部工具栏事件
table.on("toolbar(userTable)",function(obj){
switch(obj.event){
case 'add':
openAddUser();
break;
};
})
//监听行工具事件
table.on('tool(userTable)', function(obj){
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if(layEvent === 'del'){
//删除
layer.confirm('真的删除【'+data.realname+'】这个用户吗', function(index){
var userId = data.userid;
//向服务端发送删除指令
$.post("user/del/" + userId, {
_method: "delete"},function(res){
layer.msg(res);
//刷新数据 表格
tableIns.reload();
})
});
} else if(layEvent === 'edit'){
//编辑
openUpdateUser(data);
}else if(layEvent==='resetUserPwd'){
layer.confirm('真的重置【'+data.realname+'】这个用户的密码吗', function(index){
//向服务端发送删除指令
$.post("user/resetPwd", {
"userId": data.userid}, function(res){
layer.msg(res);
})
});
}else if(layEvent==='selectUserRole'){
openselectUserRole(data);
}
});
var url;
var mainIndex;
//打开添加页面
function openAddUser(){
mainIndex=layer.open({
type:1,
title:'添加用户',
content:$("#saveOrUpdateDiv"),
area:['800px','400px'],
success:function(index){
//清空表单数据
$("#dataFrm")[0].reset();
url="user/add";
}
});
}
//打开修改页面
function openUpdateUser(data){
mainIndex=layer.open({
type:1,
title:'修改用户',
content:$("#saveOrUpdateDiv"),
area:['800px','400px'],
success:function(index){
form.val("dataFrm",data);
url="user/update";
}
});
}
//保存
form.on("submit(doSubmit)",function(obj){
//序列化表单数据
var params=$("#dataFrm").serialize();
// alert(params);
$.post(url,params,function(obj){
// console.log('data---->', obj);
layer.msg(obj);
//关闭弹出层
layer.close(mainIndex)
//刷新数据 表格
tableIns.reload();
})
});
});
</script>
</body>
</html>