一套增删改查，打完收工。
layui版本：2.4.5 +
默认请求,分页。
/rest_address?page=1&limit=1json数据格式要求. 参数说明文档
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>
![[BZOJ 1085] [SCOI2005] 骑士精神 [ IDA* 搜索 ]](http://pic.xiahunao.cn/[BZOJ 1085] [SCOI2005] 骑士精神 [ IDA* 搜索 ])
)
实现重定向的三种方法的总结)
