權限管理系統之LayUI實現頁面增刪改查和彈出層交互
阿新 • • 發佈：2019-02-25
層級 keyword sad ole span cache itl else wsad 
由於對LayUI框架不太熟悉，昨天抽空看了下LayUI的文檔，今天在網上找了使用LayUI進行增刪改查相關內容，自己照葫蘆畫了個瓢，畫瓢部分不是很難，主要是下午遇到了一個彈出層的問題耗時比較久。
同一項目，設計風格都差不多，對於涉及單個數據表的頁面，基本都是增刪改查，布局都是差不多，實際項目中都是復制、粘貼過來改下數據基本就能完成80%，後續就是修修補補或者是要實現一些特殊需求，記得剛參加工作時，老大直接給了一個已經做好的模板頁面讓我比對著手動敲一遍，當時覺得重復操作沒啥用，現在再看覺得作用很大，受益匪淺，所以弄一個模板頁是很有必要的，後續功能頁面只要復制粘貼修改數據就好了。
一、用戶列表頁list.html
列表頁面一般上面是查詢搜索框和頁面交互按鈕，下面是表格顯示搜索結果。用戶列表頁面也是這樣布局的，上面的搜索框比較少，後續可以進一步優化。列表顯示的數據這裏暫時在UserController中寫成固定的，數據是從https://www.layui.com/demo/table/user/?page=1&limit=30獲取的。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta http-equiv="pragma" content="no-cache"></meta>
<meta http-equiv="cache-control" content="no-cache"></meta>
<meta http-equiv="expires" content="0"></meta>
<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
<style>
body{margin: 10px;}
二、用戶列表腳本user.js
在user.js中主要是table表格渲染、增刪改查按鈕的交互。
var table; var layer; layui.use([ ‘layer‘, ‘table‘, ‘element‘ ], function() { table = layui.table; layer = layui.layer; // 執行一個 table 實例 table.render({ elem : ‘#user‘, height:350, url : ‘/user/getUsers‘, page :true, // 開啟分頁 cols : [ [ // 表頭 { fixed : ‘left‘, type : ‘checkbox‘ }, { field : ‘id‘, title : ‘ID‘, width : 80, fixed : ‘left‘ }, { field : ‘username‘, title : ‘姓名‘, width : 160 }, { field : ‘sex‘, title : ‘性別‘, width : 220, },{ title : ‘操作‘, width : 200, align : ‘center‘, toolbar : ‘#tools‘ } ] ] }); // 監聽工具條 table.on(‘tool(tools)‘, function(obj) { // 註：tool是工具條事件名，test是table原始容器的屬性 var data = obj.data // 獲得當前行數據 , layEvent = obj.event; // 獲得 lay-event 對應的值 if (‘edit‘ == layEvent) { addTea(data.id) } else if (‘del‘ == layEvent) { del(data.id); } }); }); function queryUser(){ var keyword = $("#keyword").val(); table.reload(‘user‘, { where : { keyword : keyword }, page : { curr : 1 } }); } var index; function addUser(id) { index = parent.layer.open({ type : 2, title : "用戶信息", area: [‘550px‘, ‘400px‘], content : ‘/user/edit?id=‘ + id }); layer.full(index); } function del(id) { parent.layer.open({ type : 1, content : ‘<div style="padding: 20px 80px;">確定刪除記錄?</div>‘, btn : [ ‘確定‘, ‘取消‘ ], yes : function(index, layero) { $.ajax({ url : "/user/delete", data : { "id" : id }, dataType : "text", success : function(data) { if(data==0){ layer.msg("刪除成功！"); layer.close(index); queryUser(); }else{ layer.msg("刪除失敗！"); } }, error : function() { } }); } }); } /** * 獲取選中數據 */ function getDatas(){ var checkStatus = table.checkStatus(‘user‘); var data = checkStatus.data; var id = ""; for(var i=0;i<data.length;i++){ id += data[i].id; if(i<data.length-1){ id += ","; } } if(data.length != 0){ del(id); } }View Code
三、編輯頁面edit.html
點擊新增用戶、編輯按鈕時會彈出遮罩層顯示出編輯頁面。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="/layui/css/layui.css" media="all" /> <style> body{margin: 10px;} </style> </head> <body class="childrenBody"> <form class="layui-form changePwd"> <input type="hidden" name="id" id="id" th:value="${id}"> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input type="text" name="name" value="" placeholder="姓名" id="name" lay-verify="required|name" class="layui-input pwd"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性別</label> <div class="layui-input-block"> <input type="radio" name="sex" value="0" title="女" checked=""> <input type="radio" name="sex" value="1" title="男" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">年齡</label> <div class="layui-input-block"> <input type="text" name="age" value="" placeholder="年齡" id="age" class="layui-input pwd"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" lay-filter="*">保存</button> <button type="button" class="layui-btn layui-btn-primary" onclick="layerclose();">關閉</button> </div> </div> </form> <script type="text/javascript" src="/layui/layui.js"></script> <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script> <script> $(function(){ var id = $("#id").val(); if(id != ""){ $.ajax({ url: "/user/queryById", data:{"id":id}, dataType:"json", success: function(data){ $("#name").val(data.name); $("#age").val(data.age); $("input[name=‘sex‘]").eq(data.sex).attr("checked",‘checked‘); },error:function(){ } }); } }) function layerclose() { layui.use([‘layer‘ ], function() { var layer = layui.layer; var index=parent.layer.getFrameIndex(window.name);//獲取當前彈出層的層級 parent.layer.close(index);//關閉彈出層 location.reload();//刷新父頁面 }) } layui.use([‘form‘,‘layer‘ ], function() { var form = layui.form; var layer = layui.layer; // 添加驗證規則 form.verify({ name : function(value, item) { value = value.trim(); if (value.length < 0) { return "請輸入教師名稱"; } } }); form.on(‘submit(*)‘, function(data) { var index = layer.msg(‘提交中，請稍候‘,{icon: 16,time:false,shade:0.8}); var d = data.field; var url = "/user/add"; if(d.id != ""){ url = "/user/edit"; } $.ajax({ url: url, data:d, dataType:"text", success: function(data){ layer.close(index); if(data == 0){ layer.msg("保存成功！"); parent.queryTea(); parent.close(); }else{ layer.msg("保存失敗！"); } },error:function(){ layer.close(index); layer.msg("保存失敗！"); } }); return false; }); }); </script> </body> </html>View Code
四、彈出層遮罩與關閉問題
在實現上面功能的過程中遇到兩個問題，還都是遮照層的問題，一是點擊新增用戶彈出的遮罩層不是全屏，只遮了右側內容部分，二、在彈出編輯頁面之後點擊取消按鈕時遮照層關閉不了。
對於第一個問題可以參考https://blog.csdn.net/yufengaotian/article/details/79231552，在父頁面home.html和子頁面list.html中都引入引用layui.js和layui.css，在子頁面list.html中使用parent.layer.open打開iframe。
function addUser(id) { index = parent.layer.open({ type : 2, title : "用戶信息", area: [‘550px‘, ‘400px‘], content : ‘/user/edit?id=‘ + id }); layer.full(index); }
對於第二個問題也是耗時最多的，這個也是坑最深的。在下面的代碼中的onclick事件方法名寫成了close();，開始以為是關閉方法寫在edit.html中無法關閉，又把關閉事件放在了user.js中，依然不行，在close()方法中使用alert調試也彈不出信息，很是苦惱，後來嘗試改下方法名再試沒想到點擊事件起作用了。關閉事件參考https://www.layui.com/doc/modules/layer.html。
<button type="button" class="layui-btn layui-btn-primary" onclick="layerclose();">關閉</button>
五、小結
目前已完成首頁、單表頁面增刪改查布局交互，但現在使用的還是固定數據，後續就是集成Mybatis、實現分頁功能，用真實數據返回接口。
權限管理系統之LayUI實現頁面增刪改查和彈出層交互