layui简单的两个页面
layui前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/layui-v2.5.6/layui/css/layui.css"> <script src="/layui-v2.5.6/layui/layui.js"></script> </head> <body> <script type="text/html" id="updateUserHtml"> <form class="layui-form layui-form-pane" action="" lay-filter="updateForm"> <input type="hidden" value="" name="id" > <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-inline"> <input type="text" name="username" placeholder="请输入" 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="password" placeholder="请输入" 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="real_name" placeholder="请输入" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">用户类型</label> <div class="layui-input-inline"> <select name="type"> <option value="">请选择角色</option> <option value="1">管理员</option> <option value="2">业务员</option> </select> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否锁定</label> <div class="layui-input-block" id="isDelDom"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">修改日期</label> <div class="layui-input-inline"> <input name="modify_time" type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss"> </div> </div> <!--<div class="layui-form-item" pane="">--> <!--<label class="layui-form-label">是否锁定</label>--> <!--<div class="layui-input-block">--> <!--<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="是否锁定" lay-text="锁定|未锁定" >--> <!--</div>--> <!--</div>--> </form> </script> <div> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> </div> </script> <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="del">删除</a> </script> </div> <script> layui.use(['table', 'jquery', 'layer', 'form', 'layedit', 'laydate'], function () { var table = layui.table; var layer = layui.layer; var $ = layui.jquery; // $ var form = layui.form; var layedit = layui.layedit; var laydate = layui.laydate; table.render({ elem: '#test' , url: '/TBUserSelectPageAllServlet' , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可 title: '提示' , layEvent: 'LAYTABLE_TIPS' , icon: 'layui-icon-tips' }] , title: '用户数据表' , cols: [[ {type: 'checkbox', fixed: 'left'} , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true} , {field: 'username', title: '用户名', width: 120, edit: 'text'} // ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){ // return '<em>'+ res.email +'</em>' // }} , {field: 'password', title: '密码', width: 150, edit: 'text', sort: true} , {field: 'real_name', title: '真实姓名', width: 100} , { field: 'type', title: '用户类型', width: 120, templet: function (res) { if (res.type == 1) { return " <span style='color: red'> 管理员 </span> " } else if (res.type == 2) { return " <span style='color: green'> 业务员 </span> " } else { return "其他人员" } } } , { field: 'is_del', title: '是否锁定', width: 120, templet: function (res) { if (res.is_del == 1) { return " <input type='checkbox' name='is_del' lay-skin='switch' lay-filter='switchList' lay-text='锁定|未锁定' value='1'> " } else if (res.is_del == 2) { return " <input type=\"checkbox\" name=\"is_del\" checked='' lay-skin=\"switch\" lay-filter='switchList' lay-text=\"锁定|未锁定\" value='2'> " } } } , {field: 'img', title: '头像', width: 90} , {field: 'create_time', title: '创建时间', width: 180, sort: true} , {field: 'modify_time', title: '修改时间', width: 180} , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150} ]] , page: true , parseData: function (res) { //res 即为原始返回的数据 var code = 0111; if (res.resultCode == 20000) { code = 0; } else { code = res.resultCode; } return { "code": code, //解析接口状态 "msg": res.resultMsg, //解析提示文本 "count": res.totalCount, //解析数据长度 "data": res.resultData //解析数据列表 }; } }); //头工具栏事件 table.on('toolbar(test)', function (obj) { var checkStatus = table.checkStatus(obj.config.id); switch (obj.event) { case 'getCheckData': var data = checkStatus.data; layer.alert(JSON.stringify(data)); break; case 'getCheckLength': var data = checkStatus.data; layer.msg('选中了：' + data.length + ' 个'); break; case 'isAll': layer.msg(checkStatus.isAll ? '全选' : '未全选'); break; //自定义头工具栏右侧图标 - 提示 case 'LAYTABLE_TIPS': layer.alert('这是工具栏右侧自定义的一个图标按钮'); break; } ; }); //监听行工具事件 table.on('tool(test)', function (obj) { var data = obj.data; console.log(data) //console.log(obj) if (obj.event === 'del') { layer.confirm('真的删除行么', function (index) { // obj.del(); // 发送 ajax 到 后台 进行 删除！！ $.ajax({ url: '/TBUserDeleteByIdServlet', type: 'post', data: {'id': data.id}, success: function (res) { console.log(res); // res.code == 400 no ==0 ok if (res.code == 0) { layer.msg("删除成功") obj.del(); } else { layer.msg("删除成功") } }, dataType: 'json' }); layer.close(index); }); } else if (obj.event === 'edit') { layer.open({ type: 1, content: $("#updateUserHtml").html(), title: "用户的修改", area: ['700px', '700px'], success: function (layero, index) { console.log(layero, index); var isDelNum = data.is_del var delDom = ''; var isDelTrue = false; if (isDelNum == 1) { console.log("等于1") delDom = $('<input type="checkbox" name="is_del" lay-skin="switch" lay-filter="switchUpdate" lay-text="锁定|未锁定" value="1">'); isDelTrue = false } else { console.log("等于2") delDom = $('<input type="checkbox" checked="" name="is_del" lay-skin="switch" lay-filter="switchUpdate" lay-text="锁定|未锁定" value="2">'); isDelTrue = true } $("#isDelDom").append(delDom) // 思路： 当 isDelNum==1 就是 锁定， 当 isDelNum==2 的时候， 就是未锁定 // <input type="checkbox" checked="" name="is_del" lay-skin="switch" lay-filter="switchUpdate" lay-text="锁定|未锁定" value="2"> // 取值， 赋值 //给表单赋值 password real_name type is_del modify_time form.val("updateForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值 "username": data.username // "name": "value" , "password": data.password , "real_name": data.real_name , "type": data.type , "is_del": isDelTrue , "modify_time": data.modify_time , 'id':data.id }); form.render() // 当页面重新 更新的后， 一定记得重新渲染一下 layui， 最好 后台/前台清空缓存 //日期时间选择器 laydate.render({ elem: '#test5' , type: 'datetime' }); }, btn: ['确认修改', '取消修改', '按钮三'], yes: function (index, layero) { //按钮【按钮一】的回调 // alert("我是确认修改，将来这里要发送ajax") // 1. 后台写个 修改的 dao // 2。 写个 service // 3. servlet // 4. 前端 发送 数据！！！ //获取表单区域所有值 var data1 = form.val("updateForm"); console.log(data1) $.ajax({ url:'/UpdateAllByIdServlet', type:'post', data: data1 , success:function (res) { console.log(res) if(res.code==0){ layer.msg("修改成功") layer.close(index); table.reload(); }else{ layer.msg("修改失败") } }, dataType:'json' }); }, btn2: function (index, layero) { //按钮【按钮二】的回调 //return false 开启该代码可禁止点击该按钮关闭 }, btn3: function (index, layero) { //按钮【按钮三】的回调 //return false 开启该代码可禁止点击该按钮关闭 }, cancel: function () { //右上角关闭回调 alert("你点击了 右上角的关闭") //return false 开启该代码可禁止点击该按钮关闭 } }); // layer.prompt({ // formType: 2 // ,value: data.email // }, function(value, index){ // obj.update({ // email: value // }); // layer.close(index); // }); } }); //监听指定开关 form.on('switch(switchUpdate)', function (data) { console.log('data', data); console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //开关是否开启，true或者false console.log(data.value); //开关value值，也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 console.log(this.checked ? 'true' : 'false') /* layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), { offset: '6px' });*/ // layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis) }); //监听提交 form.on('submit(updateSubmit)', function (data) { layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; }); // 对 数据表各种的 list field 种的开关 做个 on 事件 switchList form.on('switch(switchList)', function (data) { console.log('data', data); console.log(data.elem); //得到checkbox原始DOM对象 console.log("xxxfff", data.elem.checked); //开关是否开启，true或者false console.log(data.value); //开关value值，也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 console.log(data.othis.parents("tr").find("td").eq(1).text()); // jquery console.log(this.checked ? 'true' : 'false') // ajax 发送 修改的 请求到 后台。 UpdateIsDelByidServlet var userId = data.othis.parents("tr").find("td").eq(1).text(); var isB = this.checked ? 2 : 1; console.log("ajax--调用前的 dataValue = " + data.value) $.ajax({ url: '/UpdateIsDelByidServlet', type: 'POST', data: { id: userId, is_del: isB }, success: function (res) { console.log(res) }, dataType: 'json' }); // layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), { // offset: '6px' // }); // layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis) }); }); </script> </body> </html>
layui前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> </head> <body> <script type="text/html" id="updateStudentHtml"> <form class="layui-form layui-form-pane" action="" lay-filter="updateForm" onsubmit="return false"> <input type="hidden" value="" name="studentId"> <div class="layui-form-item"> <label class="layui-form-label">学生账号</label> <div class="layui-input-block"> <input type="text" name="studentAccount" placeholder="请输入" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生密码</label> <div class="layui-input-block"> <input type="password" name="studentPassword" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">真实姓名</label> <div class="layui-input-block"> <input type="text" name="studentName" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生年龄</label> <div class="layui-input-block"> <input type="text" name="studentAge" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生资金</label> <div class="layui-input-block"> <input type="text" name="studentMoney" 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="studentTime" class="layui-input" id="test6" placeholder="yyyy-MM-dd HH:mm:ss"> </div> </div> <!--<button type="submit" class="layui-btn" lay-submit="" lay-filter="insertSubmit" id="updateSubmit" style="display: none">立即提交</button>--> </form> </script> <script type="text/html" id="insertOneHtml"> <form class="layui-form" action="" lay-filter="insertForm" id="form" onsubmit="return false"> <div class="layui-form-item"> <label class="layui-form-label">学生账号</label> <div class="layui-input-block"> <input type="text" name="studentAccount" placeholder="请输入" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码框</label> <div class="layui-input-block"> <input type="password" name="studentPassword" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">真实姓名</label> <div class="layui-input-block"> <input type="text" name="studentName" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生年龄</label> <div class="layui-input-block"> <input type="text" name="studentAge" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学生资金</label> <div class="layui-input-block"> <input type="text" name="studentMoney" 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="studentTime" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss"> </div> </div> <button type="submit" class="layui-btn" lay-submit="" lay-filter="insertSubmit" id="insertSubmit" style="display: none">立即提交</button> </form> </script> <div> <form class="layui-form" action="" onsubmit="return false"> <div class="layui-inline"> <label class="layui-form-label">名字</label> <div class="layui-input-inline"> <input type="text" name="studentName" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">是否成年</label> <div class="layui-input-inline"> <select id="csex" name="studentAge" lay-search=""> <option value="">请选择性别</option> <option value="18">成年</option> <option value="17">未成年</option> </select> </div> </div> <div class="layui-inline"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formSearch">搜索</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="moreDel">批量删除</button> <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="insertOne">添加学员</button> </div> </script> <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="del">删除</a> </script> <script> layui.use(['table', 'jquery', 'layer', 'form', 'layedit', 'laydate', 'upload', 'element'], function () { var table = layui.table; var $ = layui.jquery; var layer = layui.layer; var form = layui.form; var upload = layui.upload; var element = layui.element; var layedit = layui.layedit; var laydate = layui.laydate; //新增 form.on('submit(insertSubmit)',function (data) { console.log(data); $.ajax({ url:'/student/insertStudent', type:'post', data:data.field, success:function (res) { console.log(res); }, dataType:'json' }); }) table.render({ elem: '#test' , url: '/student/selectAllByPage'/*tpa=http://www.layui.com/test/table/demo1.json*/ , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可 title: '提示' , layEvent: 'LAYTABLE_TIPS' , icon: 'layui-icon-tips' }] , title: '用户数据表' , cols: [[ {type: 'checkbox', fixed: 'left'} , {field: 'studentId', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true} , {field: 'studentName', title: '用户名', width: 80, edit: 'text'} // ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){ // return '<em>'+ res.email +'</em>' // }} , {field: 'studentPassword', title: '密码', width: 80, edit: 'text', sort: true} , {field: 'studentName', title: '真实姓名', width: 100} , { field: 'studentAge', title: '用户类型', width: 80, templet: function (res) { if (res.studentAge >= 18) { return "<span style='color: red'>已成年</span>" }else{ return "<span style='color: green'>未成年</span>" } } } , {field: 'studentMoney', title: '学生资金', width: 180} , {field: 'studentTime', title: '创建时间', width: 180} , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150} ]] , page: true }); //搜索一下 form.on('submit(formSearch)', function (data) { // layer.msg(JSON.stringify(data.field)); console.log(data.field.studentName); console.log(data.field.studentAge); //点击搜索，发送ajax!发送ajax //上述方法等价于 table.reload('test', { where: { //设定异步数据接口的额外参数，任意设 studentName: data.field.studentName, studentAge: data.field.studentAge, // page:1, // limit:10 } , page: { curr: 1 //重新从第 1 页开始 } }); //只重载数据 return false; }); //头工具栏事件 table.on('toolbar(test)', function (obj) { var checkStatus = table.checkStatus(obj.config.id); switch (obj.event) { case 'getCheckData': var data = checkStatus.data; layer.alert(JSON.stringify(data)); break; case 'getCheckLength': var data = checkStatus.data; layer.msg('选中了：' + data.length + ' 个'); break; case 'isAll': layer.msg(checkStatus.isAll ? '全选' : '未全选'); break; case 'moreDel': var data = checkStatus.data; var ids = new Array(); $.each(data,function (index, item) { ids.push(item.studentId); }) console.log(ids); layer.confirm('是否真的进行批量删除？', function (index) { $.ajax({ url:'/student/deleteAll', type:'post', data: {'ids':ids}, success:function (res) { console.log(res); }, dataType:'json' }); layer.close(index); }); break; case "insertOne": layer.open({ type: 1, content: $("#insertOneHtml").html(), title: "新增学员", area: ['600px', '600px'], success: function (layero, index) { //日期时间选择器 laydate.render({ elem: '#test5' , type: 'datetime' }); }, btn: ['确认修改', '取消修改', '按钮三'], yes: function (index, layero) { $("#insertSubmit").click(); layer.close(index); }, btn2: function (index, layero) { //return false 开启该代码可禁止点击该按钮关闭 }, cancel: function () { //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭 } }); break; //自定义头工具栏右侧图标 - 提示 case 'LAYTABLE_TIPS': layer.alert('这是工具栏右侧自定义的一个图标按钮'); break; }; }); //监听行工具事件 table.on('tool(test)', function (obj) { var data = obj.data; console.log(data) //console.log(obj) if (obj.event === 'del') { layer.confirm('真的删除行么', function (index) { // obj.del(); // 发送 ajax 到 后台 进行 删除！！ $.ajax({ url: '/student/deleteByStudentId', type: 'post', data: {'id': data.studentId}, success: function (res) { console.log(res); // res.code == 400 no ==0 ok if (res.code == 0) { layer.msg("删除成功") obj.del(); } else { layer.msg("删除成功") } }, dataType: 'json' }); layer.close(index); }); } else if (obj.event === 'edit') { layer.open({ type: 1, content: $("#updateStudentHtml").html(), title: "学生的修改", area: ['600px', '600px'], success: function (layero, index) { console.log(data); form.val("updateForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值 "studentAccount": data.studentAccount // "name": "value" , "studentPassword": data.studentPassword , "studentName": data.studentName , "studentAge": data.studentAge , "studentMoney": data.studentMoney , "studentTime": data.studentTime , 'studentId':data.studentId }); form.render() // 当页面重新 更新的后， 一定记得重新渲染一下 layui， 最好 后台/前台清空缓存 //日期时间选择器 laydate.render({ elem: '#test6' , type: 'datetime' }); }, btn: ['确认修改', '取消修改', '按钮三'], yes: function (index, layero) { //按钮【按钮一】的回调 //获取表单区域所有值 var data1 = form.val("updateForm"); console.log(data1) $.ajax({ url:'/student/updateStudent', type:'post', data: data1 , success:function (res) { console.log(res) if(res.code==0){ layer.msg("修改成功") layer.close(index); table.reload("test"); }else{ layer.msg("修改失败") } }, dataType:'json' }); }, btn2: function (index, layero) { //按钮【按钮二】的回调 //return false 开启该代码可禁止点击该按钮关闭 }, btn3: function (index, layero) { //按钮【按钮三】的回调 //return false 开启该代码可禁止点击该按钮关闭 }, cancel: function () { //右上角关闭回调 // alert("你点击了 右上角的关闭") //return false 开启该代码可禁止点击该按钮关闭 } }); // layer.prompt({ // formType: 2 // ,value: data.email // }, function(value, index){ // obj.update({ // email: value // }); // layer.close(index); // }); } }); }); </script> </body> </html>
浙公网安备 33010602011771号