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   // 最小不能小于今天，即今天之前的日期不能选择
    });

})