<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用戶管理界面</title> <link rel="stylesheet" href="../../static/css/layui.css" media="all"> </head> <style> .layui-table-cell { text-align: center; } .my-form { margin-top: 5%; } .item{ margin-left: 130px; } .my-form-item{ padding-top: 20px; } </style> <body> <table class="layui-hide" id="test" lay-filter="test"></table> <div id="add-main" style="display: none;"> <div class="my-form"> <form class="layui-form" action="/user/add" method="POST" lay-skin="line"> <div class="layui-form-item my-form-item"> <label class="layui-form-label layui-icon"></label> <div class="layui-input-inline"> <input type="text" name="name" lay-verify="required" placeholder="請輸入用戶名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item my-form-item"> <label class="layui-form-label layui-icon"></label> <div class="layui-input-inline"> <input type="text" name="password" lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item my-form-item"> <div class="layui-input-block item"> <button class="layui-btn" lay-submit="" lay-filter="demo1" id="submit1">保存</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> <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-icon" lay-event="add"></button> <button class="layui-btn layui-btn-sm layui-icon" lay-event="batchDel"></button> <div class="layui-btn layui-btn-sm"> <input type="text" name="search"> </div> <button class="layui-btn layui-btn-sm layui-icon" lay-event="search"></button> <button class="layui-btn layui-btn-sm layui-icon" lay-event="flush"></button> </div> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-danger layui-btn-xs layui-icon" lay-event="del"></a> </script> <script src="../../static/layui.js" charset="utf-8"></script> <script> layui.use(['table', 'layer'], function () { var table = layui.table, layer = layui.layer; var $ = layui.$; table.render({ url: "/user/list" //換成自己的url , method: "GET" , elem: '#test' , toolbar: '#toolbarDemo' , title: '用戶數據表' , cols: [ [ {type: 'checkbox', fixed: 'left'} , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true} , {field: 'name', title: '用戶名', width: 120, edit: 'text'} , {field: 'password', title: '密碼', width: 250} , {field: 'updateBy', title: '更新人', width: 120, edit: 'text'} , { field: 'updateTime', title: '更新時間', minwidth: 80, sort: true, templet: function (d) { return layui.util.toDateString(d.updateTime); } } , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150} ] ] , page: true }); //頭工具欄事件 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 'add': layer.open({ title: '增加用戶', /*如果是外部的html，type2，內部，type1*/ type: 1, btnAlign: 'c', area: ['400px', '340px'], content: $("#add-main").html() //未做的是去監聽表單提交，給后台發送ajax請求 } ) ; break; case 'batchDel' : /*發送ajax請求到后台執行批量刪除*/ break; case 'flush' : table.reload('test', { url: "/user/list" , method: "GET" }); break; case 'search' : layer.msg("根據用戶名查找"); var name = $('input[name="search"]').val(); table.reload('test', { url: 'user/search', //換成自己的url where: { name: name, }, page: { curr: 1 } }); break; } ; }); //監聽單元格編輯 table.on('edit(test)', function (obj) { var value = obj.value //得到修改后的值 , data = obj.data //得到所在行所有鍵值 , field = obj.field; //得到字段 $.ajax({ url: '/user/update', //換成自己的url type: 'POST', dataType: 'json', data: data, success: function (e) { if (e.code == 0) { layer.msg(e.msg); } else { layer.msg(e.msg); } }, error: function (e) { layer.msg(e); } }) }); //監聽行工具事件 table.on('tool(test)', function (obj) { var data = obj.data; if (obj.event === 'del') { layer.confirm('真的刪除行么', function (index) { obj.del(); layer.close(index); $.ajax({ url: "/user/del", //換成自己的url type: "POST", dataType: "json", data: { id: data.id }, success: function (e) { if (e.code == 0) { layer.msg(e.msg); } else { layer.msg(e.msg); } }, error: function (e) { layer.msg(e); } }) }); } else if (obj.event == 'add') { $.ajax({ url: "/user/add", //這里換成自己的url即可 type: "POST", dataType: "json", data: data, success: function (e) { if (e.code == 0) { layer.msg(e.msg); } else { layer.msg(e.msg); } }, error: function (e) { layer.msg(e); } }) } }); }) </script> </body> </html>
效果展示
image.png
原文地址：https://www.jianshu.com/p/f835b9a51372