權限管理系統之LayUI實現頁面增刪改查和彈出層交互

由於對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;}
  </style>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote role_search">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input id="keyword" type="text" value="" placeholder="請輸入關鍵字" class="layui-input search_input">
        </div>
        <a class="layui-btn search_btn" onclick="queryUser()">查詢</a>
    </div>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-normal newsAdd_btn" onclick="addUser('')">添加用戶</a>
    </div>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-danger batchDel" onclick="getDatas();">批量刪除</a>
    </div>
</blockquote>
<table class="layui-hide" id="user" lay-filter="tools"></table>
<script type="text/html" id="tools">
    <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 type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/user.js"></script>
</body>
</html>

View Code

二、用戶列表腳本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實現頁面增刪改查和彈出層交互

python+selenium模擬瀏覽器抓取智慧芽數據

使用Python調用Hadoop Hdfs的API

解決ServerAgent-2.2.3閃退問題

Hadoop3.3.6配置歷史服務器和日誌

Hadoop3.3.6 Shell命令操作

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結