Layui 踩坑記錄

layui 主頁面與彈窗之間父子頁面值傳遞

彈窗為 iframe 類型

父頁面向子頁面傳遞值：

// 查看
function lookUp(that) {
    layer.open({
        type: 2,
        area: ['700px', '450px'],
        fixed: false, //不固定
        maxmin: true,
        title: '當前線路',
        content: '/app/v1/lines/',
        success: function (layero, index) {
            var account_name = that.name;
            $.ajax({
                url: '/app/v1/lookup/?account_name=' + account_name,
                type: 'get',
                contentType: "application/json",
                dataType: "json",
                async: false,
                headers: {
                    "X-CSRFToken": getCookie("csrftoken")
                },

                success: function (resp) {
                    var body = layer.getChildFrame('body', index);      // 確認兩個頁面間父子關系
                    var iframeWin = window[layero.find('iframe')[0]['name']];   // 子頁面對象
                    var tbody_elem = body.find('tbody');       // 尋找子頁面 tbody 元素
                    for (j = 0, len = resp.length; j < len; j++) {
                        var data = resp[j];
                        if (data) {
                            $(tbody_elem).append("<tr><td>" + data+ "</td></tr>");
                        }
                    }
                }
            })
        }
    });
}

彈窗類型為普通彈窗

此類型 type 為 1，彈窗 html 頁面元素在當前上面，上面 iframe 為兩個頁面，因此可直接修改彈窗中元素。

1、html

<form class="layui-form" onsubmit="return false;" id="change_name" style="display: none">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="輸入新密碼"
                    autocomplete="off" class="layui-input" style="margin-left: -50px;margin-top: 20px;"
                    id="new_name">
        </div>
    </div>
</form>

2、表格渲染：

layui.use(['table', 'form'], function () {
    var table = layui.table;
    var form = layui.form;
    form.render();

    // 表格渲染
    table.render({
        elem: '#dtbList',
        id: 'Reload',
        height: 612,
        url: '/system/route/list/',
        method: 'get',
        page: true,
        cols: [[
            {
                field: 'name',
                title: '路由器名稱',
                width: 160,
                fixed: 'left',
                // 點擊觸發彈窗
                templet: function (d) {
                    return '<a href="javascript:void(0)" class="layui-table-link" onclick="changeName(this)" mac=' + d.mac + '>' + d.name + '</a>'
                }
            }
            , {field: 'mac', title: 'Mac 地址', width: 160, sort: true}
            , {field: 'status', title: '狀態', width: 100}
            , {field: 'type', title: '類型', width: 100}
            , {field: 'version', title: '版本', width: 100}
            , {field: 'server', title: '綁定服務器', width: 160}
            , {field: 'tunnel', title: '通道', width: 120, sort: true}
            , {field: 'bind_time', title: '綁定時間', width: 180, sort: true}
            , {field: '操作', width: 165, align: 'center', toolbar: '#barDemo'}
        ]
        ],
    });

});

3、JS：

function changeName(that) {
    var mac_addr = $(that).attr('mac');
    var mac_name = $(that).text();

    // 獲取彈窗 input 元素
    $('#new_name').val(mac_name);
    layer.open({
        type: 1,
        area: ['300px', '180px'],
        maxmin: false,  // 禁止放大、全屏
        fixed: false,
        resize: false,  // 禁止拉伸
        title: '修改名稱',
        content: $("#change_name"),
        btn: ['提交', '取消'],
        btn1: function (index, layero) {
            var new_name = $('#new_name').val();
            console.log(new_name, new_name.length);
            if (new_name.length === 0) {
                layer.alert('名稱不能為空', {icon: 5});
                return false;
            } else if (new_name.length >=15 || new_name.length < 5) {
                layer.alert('名稱長度 5-15個字符');
                return false;
            } else {
                $.ajax({
                    url: ["{% url 'system:route-name-update' %}" + '?new_name=' + new_name + '&mac_addr=' + mac_addr + '&name=' + mac_name],
                    type: 'get',
                    cache: false,
                    success: function (resp) {
                        if (resp.code === 0) {
                            layer.alert(resp.msg, {icon: 1}, function (index) {
                                parent.layer.closeAll(); // 關閉所有彈窗
                                $(that).text(new_name);
                            });

                        } else {
                            layer.alert(resp.msg, {icon: 5});
                        }
                    }

                })
            }

        },
        btn2: function (index, layero) {
            layer.closeAll();
        }

    });
}

父界面向子界面傳值

1、父界面：

function show_layer(){
layer.open({
        type: 2,
        area: [w+'px', h +'px'],
        fix: false, //不固定
        maxmin: true,
        shadeClose: true,
        shade:0.4,
        title: title,
        content: url,  //url 為子布局的url路徑
        success:function (layero,index) {
                var iframe = window['layui-layer-iframe' + index];
                iframe.child('我是父布局傳到子布局的值')
        }
    });
}

2、子界面：

function child(obj){
    console.log(obj);//獲取父界面的傳值
}

子界面向父界面傳值

1、子界面：

parent.GetValue('我是子界面的數值'); //GetValue是父界面的Js 方法
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

2、父界面：

function GetValue(obj){
    console.log(obj);
}

參考文章：https://www.cnblogs.com/yysbolg/p/9977387.html

layui 下拉框是隱藏的

需要使用 js 渲染下：

layui.use('form', function () {
        var form = layui.form;
        form.render();
    })

layui 表格過濾並重新渲染

邏輯：前端提供過濾框，將過濾條件發送到后台過濾，請求成功后，重新渲染表格內容。

1、表格和過濾部分 HTML 內容：

<div class="box-body">
    {% csrf_token %}
    <!-- 過濾 -->
    <div class="demoTable" style="margin-bottom: 20px;">
        <label style="font-weight: 500;!important;">路由器名稱：</label>
        <div class="layui-inline">
            <input class="layui-input" name="mac_name" id="mac_name" autocomplete="off">
        </div>

        <label style="margin-left: 30px;font-weight: 500;!important;">路由器 Mac：</label>
        <div class="layui-inline">
            <input class="layui-input" name="mac_addr" id="mac_addr" autocomplete="off">
        </div>

        <label style="margin-left: 30px;font-weight: 500;!important;">綁定服務器：</label>
        <div class="layui-inline">
            <input class="layui-input" name="server" id="server" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="getInfo" id="filter">搜索</button>
    </div>

    <!-- 表格 -->
    <table id="dtbList" lay-filter="test" class="display" cellspacing="0" width="100%">

    </table>

    <!-- 表格操作 -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="bind">綁定</a>
        <a class="layui-btn layui-btn-xs" lay-event="unbind">解綁</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
    </script>
</div>

2、表格渲染：

向后台發送 ajax 請求，獲取數據並渲染：

layui.use(['table', 'form'], function () {
    var table = layui.table;
    var form = layui.form;
    form.render();

    // 表格渲染
    table.render({
        elem: '#dtbList',
        id: 'Reload',
        height: 612,
        url: '/system/route/list/',
        method: 'get',
        page: true,
        cols: [[
            {
                field: 'name',
                title: '路由器名稱',
                width: 160,
                fixed: 'left',
                templet: function (d) {
                    return '<a href="javascript:void(0)" class="layui-table-link" onclick="changeName(this)" mac=' + d.mac + '>' + d.name + '</a>'
                }
            }
            , {field: 'mac', title: 'Mac 地址', width: 160, sort: true}
            , {field: 'status', title: '狀態', width: 100}
            , {field: 'type', title: '類型', width: 100}
            , {field: 'version', title: '版本', width: 100}
            , {field: 'server', title: '綁定服務器', width: 160}
            , {field: 'tunnel', title: '通道', width: 120, sort: true}
            , {field: 'bind_time', title: '綁定時間', width: 180, sort: true}
            , {field: '操作', width: 165, align: 'center', toolbar: '#barDemo'}
        ]
        ],
    });
});

3、過濾：

搜索按鈕綁定 click() 事件，獲取過濾條件，然后發送請求，請求成功重新 reload 表格數據：

 // 過濾
$('#filter').click(function () {
    var mac_name = $('#mac_name').val();
    var mac_addr = $('#mac_addr').val();
    var server = $('#server').val();
    table.reload('Reload', {
        // where 為發送到后台的數據
        where: {
            'mac_name': mac_name,
            'mac_addr': mac_addr,
            'server': server
        }
    })
})

這里並沒有單獨發送 ajax 請求，而是使用 table 渲染時的請求，只是額外地添加了過濾參數。

注意：過濾條件，若包裹在 form 表單，需要禁止 form 自身的提交 onsubmit="return false;"

將單元格渲染為 a 標簽

若想將哪個單元格渲染 a 標簽，可以使用 templet 參數綁定模板，插件本身提供三種方法，這是第二種：函數轉義：

 table.render({
    elem: '#dtbList',
    id: 'Reload',
    height: 612,
    url: '/system/route/list/',
    method: 'get',
    page: true,
    cols: [[
        {
            field: 'name',
            title: '路由器名稱',
            width: 160,
            fixed: 'left',
            templet: function (d) {
                return '<a href="javascript:void(0)" class="layui-table-link" onclick="changeName(this)" mac=' + d.mac + '>' + d.name + '</a>'
            }
        }
        , {field: 'mac', title: 'Mac 地址', width: 160, toolbar: '#barDemo'}
    ]
    ],
});

詳細可參考：https://www.layui.com/doc/modules/table.html#templet

注意：啟動 d 為當前行數據

layer alert 類型

layer.alert('確定刪除嗎？', {
        title: '提示'
        , icon: 3 //0:感嘆號 1：對號 2：差號 3：問號 4：小鎖 5：哭臉 6：笑臉
        , time: 0 //不自動關閉
        , btn: ['YES', 'NO']
        , yes: function (index) {
            layer.close(index);
            $.ajax({
                type: "POST",
                url: "{% url 'system:rbac-role-delete' %}",
                data: {"id": id, csrfmiddlewaretoken: '{{ csrf_token }}'},
                cache: false,
                success: function (msg) {
                    if (msg.result) {
                        layer.alert('刪除成功', {icon: 1});
                        oDataTable.ajax.reload();
                    } else {
                        //alert(msg.message);
                        layer.alert('刪除失敗', {icon: 2});
                    }
                    return;
                }
            });
        }
    });

layui 彈出輸入框

1、html

默認隱藏，否則當前頁碼會顯示：

<form class="layui-form" onsubmit="return false;" id="change_name" style="display: none">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="輸入新密碼"
                    autocomplete="off" class="layui-input" style="margin-left: -50px;margin-top: 20px;"
                    id="new_name">
        </div>
    </div>
</form>

2、js

content 參數綁定 form 表單 id：

layer.open({
    type: 1,    // 類型 為 1
    area: ['300px', '180px'],
    maxmin: false,  // 禁止放大、全屏
    fixed: false,
    resize: false,  // 禁止拉伸
    title: '修改名稱',
    content: $("#change_name"),
    btn: ['提交', '取消'],
    // 提交按鈕
    btn1: function (index, layero) {
        $.ajax({
            url: ["{% url 'system:route-name-update' %}" + '?new_name=' + new_name + '&mac_addr=' + mac_addr + '&name=' + mac_name],
            type: 'get',
            cache: false,
            success: function (resp) {
                if (resp.code === 0) {
                    layer.alert(resp.msg, {icon: 1}, function (index) {
                        parent.layer.closeAll(); // 關閉所有彈窗
                        $(that).text(new_name);
                    });

                } else {
                    layer.alert(resp.msg, {icon: 5});
                }
            }

        })
    },
    // 取消按鈕
    btn2: function (index, layero) {
        layer.closeAll();
    }

});

layui 表單自定義驗證規則

 <div class="layui-form-item">
    <label class="layui-form-label">賬戶創建數量</label>
    <div class="layui-input-block">
        <input type="text" name="account_num" required lay-verify="required|number|account_num"
                autocomplete="off" class="layui-input">
    </div>
</div>

js：

layui.use(['form', 'laydate'], function () {
    var form = layui.form
        , laydate = layui.laydate;

    // 表單驗證
    form.verify({
        // 對應 input 的 lay-verify 屬性
        account_num: function (value) {
            if (parseInt(value) > 1000 || parseInt(value) === 0) {
                return "賬戶數量不能超過1000或不能為0";
            } else if (parseInt(value) < 0) {
                return "賬戶數量不能為負數";
            }
        }
    });

});

以上用到的內置驗證規則規則有：required、number，分別用來判斷 input 是否為空、數字；當內置的規則不夠用時，就可以考慮使用自定義規則了。

內置驗證規則：https://blog.csdn.net/qq_35393869/article/details/86627689

注意：input 表單元素必須有 lay-verify 屬性，有多個驗證規則的話，用 | 隔開

layui 表單監聽 radio

<div class="layui-inline">
    <label class="layui-form-label">過期時間</label>
    <div class="layui-input-block">
        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
                autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-block">
        <input type="radio" name="expire_time" lay-filter="expire_time" num="1" value="1個月"
                title="1個月">
        <input type="radio" name="expire_time" lay-filter="expire_time" num="3" value="3個月"
                title="3個月" checked>
        <input type="radio" name="expire_time" lay-filter="expire_time" num="6" value="半年"
                title="半年" checked>
    </div>
</div>

js

// 監聽單選框：過期時間
form.on('radio(expire_time)', function (data) {
    var now_timer = new Date();
    var num = $(data.elem).attr('num');
    now_timer.setMonth(now_timer.getMonth() + parseInt(num));
    var change_time = '' + now_timer.getFullYear() + '-' + (now_timer.getMonth() + 1) + '-' + now_timer.getDate() + '';
    $('#date').val(change_time);
});

注意：需要指定 lay-filter

layui 表單驗證日期且不許選擇之前的日期

<div class="layui-inline">
    <label class="layui-form-label">過期時間</label>
    <div class="layui-input-block">
        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
                autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-block">
        <input type="radio" name="expire_time" lay-filter="expire_time" num="1" value="1個月"
                title="1個月">
        <input type="radio" name="expire_time" lay-filter="expire_time" num="3" value="3個月"
                title="3個月" checked>
        <input type="radio" name="expire_time" lay-filter="expire_time" num="6" value="半年"
                title="半年" checked>
    </div>
</div>

js

layui.use(['form', 'laydate'], function () {
    var form = layui.form
        , laydate = layui.laydate;

    // 日期
    var date = new Date();
    var now_time = '' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + '';
    laydate.render({
        elem: '#date',
        min: now_time   // 最小不能小於今天，即今天之前的日期不能選擇
    });

})