Layui模块化前端框架开箱使用

浅浅的花香味﹌ 2024-04-18 08:04 10阅读 0赞

官网：[经典模块化前端框架][Link 1]

#### 一、快速上手 ####

**1. 下载layui后引入两个文件到项目目录**

./layui/css/layui.css
    ./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

**2. 使用layui模块前需要加载所要使用的模块**

*  方法：`layui.use([mods], callback)`

/* Demo1.js 使用Layui的form和upload模块 */
    layui.use(['form', 'upload'], function(){   //如果只加载一个模块，可以不填数组。如：layui.use('form')
        var form = layui.form //获取form模块
        ,upload = layui.upload; //获取upload模块
      
        //监听提交按钮
        form.on('submit(test)', function(data){ 
            console.log(data);
        });
      
        //实例化一个上传控件
        upload({ 
            url: '上传接口url'
            ,success: function(data){ 
                console.log(data);
            }
        })
    });

*  常用模块：

layui.use(['layer','jquery','table','form','laypage','upload'], function() { 
    	
    	$ = layui.jquery;
    	,layer = layui.layer
    	,table= layui.table   //表格
    	,form = layui.form    //表单
    	,laypage = layui.laypage  //分页
    	,upload = layui.upload;    //上传
    }

#### 二、页面元素 ####

**1. 按钮**

*  HTML代码：

效果：  
![layui按钮][layui]

**2. 下拉选择框**

*  HTML代码：

<div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto">办公区</label>
            <div class="layui-input-inline" style="width: 100px;">
                <select name="quiz" id="custfactorySel" lay-filter="cust-factorySel">
                    <option value="0">请选择办公区</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto">专案</label>
            <div class="layui-input-inline" style="width: 150px;">
                <select name="quiz" id="custProjectSel" lay-filter="cust-projectSel">
                    <option value="0">请选择专案</option>
                </select>
            </div>
        </div>
    </div>

Layui中的下拉选择框级联，不能使用jQuery中的click方法`$("#custfactorySel").click(function(){...})`；使用事件过滤器`lay-filter`监听单个下拉框点击事件，layui中只要绑定相同事件即可，需要注意的是要使用`form.render('select')`渲染一下，`select`表示单个事件，否则渲染整个form表单。

layui.use(["form"], function () { 
        var form = layui.form;
    
        $("#custfactorySel").html("");
        var factorySelStr = "<option value=\"0\">ALL</option>";
        $.get(base + "/location/findFactory", function (result) { 
            for (var i = 0; i < result.length; i++) { 
                factorySelStr += "<option value=" + result[i] + ">" + result[i] + "</option>";
            }
            $("#custfactorySel").append(factorySelStr);
            // 放在ajax里,放在外面可能ajax还没加载完就提前渲染
            form.render('select');
        });
    
    	// 使用事件过滤器lay-filter监听单个下拉框点击事件
        form.on('select(cust-factorySel)', function (data) { 
            factSelStr = data.value; //得到被选中的值
            $("#custProjectSel").html("");
            $.get(base + "/project/findProjectByFacBuild", { "factory": factSelStr, "build": ""}, function (result) { 
                var projectSelStr = "";
                for (var i = 0; i < result.length; i++) { 
                    projectSelStr += "<option value=" + result[i] + ">" + result[i] + "</option>";
                }
                $("#custProjectSel").append(projectSelStr);
                form.render('select');
            });
    
        });
    });

*  效果：  
    ![layui下拉选择框][layui 1]

**3. 复选框**

*  HTML代码：

`Layui checkbox`不能用jQuery上常用方法来控制复选框。

*  JS代码：

// 全选
    form.on('checkbox(allChoose)', function (data) { 
        $("input[name='custCheck']").each(function () { 
            this.checked = data.elem.checked;
        });
        form.render('checkbox');
    });
    // 单选
    form.on('checkbox(oneChoose)', function (data) { 
        var i = 0;
        var j = 0;
        $("input[name='custCheck']").each(function () { 
            if (this.checked === true) { 
                i++;
            }
            j++;
        });
        if (i == j) { 
            $(".checkboxAll").prop("checked", true);
            form.render('checkbox');
        } else { 
            $(".checkboxAll").removeAttr("checked");
            form.render('checkbox');
        }
    });
    
    // 获得存储checkbox val值数组
    var customerArray = new Array();
    $("input:checkbox[name='custCheck']:checked").each(function () { 
        customerArray.push($(this).val());
    });
    if (customerArray.length == 0) { 
        layer.open({ 
            skin: "layui-layer-molv",
            title: "提示",
            content: "请勾选失效数据哦",
            icon: 8
        });
        return false;
    }

*  效果：  
    ![layui复选框][layui 2]

其他方法：[官网 – 复选框实现][Link 2]

#### 三、内置模块 ####

**1. 弹出层**

*  `layer.open(options)` \- 原始核心方法
 *  `layer.alert(content, options, yes)` \- 普通信息框
 *  `layer.confirm(content, options, yes, cancel)` \- 询问框
 *  `layer.msg(content, options, end)` \- 提示框

JS代码示例：

layer.open({ 
        type: 1,
        title: "添加普通账号",
        shade: [0.4, '#ccc'],
        skin: "layui-layer-molv", //加上边框
        area: ["700px", "470px"], //宽高
        shadeClose: false,
        btn: ['保存', '取消'],
        content: $("#customer_add"),
    
        // 点击保存按钮触发方法
        yes: function (index, layero) { 
            // 遮罩层
            var mask = $(".layui-layer-shade");
            mask.appendTo(layero.parent());
            layui.form.render();
    
            $.getJSON(base + "/customer/addCustomer", { 
    				...
                },
                function (result) { 
                    if (result.toString() == "true") { 
                        layer.open({ 
                            skin: "layui-layer-molv",
                            title: "信息",
                            content: "普通账号添加成功",
                            btn: ['確定'],
                            yes: function (layero) { 
                            	// 点击确定后关闭所有层
                                layer.closeAll();
                            }
                        });
    
                        // 添加成功后重新加载table
                        initLayPage();
                    } else { 
                      ...
                    }
                    // 清除表格上次操作信息
                    $("#add-form")[0].reset();
                }
            )
        }
    });

**2. 分页**

JS代码：

// 初始化分页layPage
    function initLayPage(pageConf) { 
    
        if (!pageConf) { 
            pageConf = { };
            pageConf.currentPage = 1;
            pageConf.pageSize = 10;
        }
    
        $.get(base + "/customer/findByPage", pageConf, function (data) { 
            layui.use(["laypage", "layer"], function () { 
                var page = layui.laypage;
                page.render({ 
                    elem: "layui",
                    count: data.total,
                    curr: pageConf.currentPage,
                    limit: pageConf.pageSize,
                    first: "首页",
                    last: "尾页",
                    layout: ["count", "prev", "page", "next", "limit", "skip"],
                    jump: function (obj, first) { 
                        if (!first) { 
                            pageConf.currentPage = obj.curr;
                            pageConf.pageSize = obj.limit;
                            initLayPage(pageConf);
                        }
                    }
                });
                fillTable(data.list, (pageConf.currentPage - 1) * pageConf.pageSize);
            })
        });
    }
    
    //填充表格数据
    function fillTable(data, num) { 
        $("#customer_list").html("");
        $.each(data, function (index, obj) { 
            // id很多时候并不是连续的,为了显示比较连续的记录数,可以这样根据当前页和每页条数动态的计算记录序号
            index = index + num + 1;
            var info = "";
            info += "<tr>";
            info += "<td><input type=\"checkbox\" name=\"custCheck\" lay-skin=\"primary\" lay-filter=\"oneChoose\" " +
                "value='" + obj.userUuid + "'></td>";
            info += "<td>" + index + "</td>";
    		...
            // 编辑方法把obj转化为JSON传递
            info += "<td><button type='button' class='layui-btn layui-btn-sm' οnclick='updateCustomer(" + JSON.stringify(obj) + ");'>编辑 </button></td>";
            info += "</tr>";
            $("#customer_list").append(info);
        });
        // js拼接table时，table中有全选框或者下拉框
        // 需要重新渲染，否则会不显示
        layui.form.render();
    }

#### 四、其他问题 ####

**1. 渲染**  
　　当在JS中拼接表格或者下拉框等页面元素HTML代码时，在拼接完成后需要对该表单元素进行渲染，`form.render()`。需要注意的是，当在ajax中动态生成时，该渲染代码需要写在ajax方法里面，写在外面可能提前渲染（表单元素还未拼接完）。

**2. Layui遮罩层**

layer弹出层遮罩挡住窗体[解决方法][Link 3]

//layero是弹层的DOM对象
    success:function(layero){ 
         var mask = $(".layui-layer-shade");
         mask.appendTo(layero.parent());
      	 ...   
    }

**3. 关闭弹出层**

*  `layer.close(index)` \- 关闭特定层

layer.open({ 
        type: 1,
        title: "添加管理员账号",
        shade: [0.4, '#ccc'],
        skin: "layui-layer-molv", //加上边框
        area: ["380px", "340px"], //宽高
        shadeClose: false,
        btn: ['保存', '取消'],
        content: $("#manager_add"),
    
        // 点击保存按钮触发方法
        yes: function (index, layero) { 
    		// 关闭当前弹出层
            layer.close(index);
            ...
    	}
    	...
    });

*  `layer.closeAll(type)` \- 关闭所有层

function (result) { 
        if (result.toString() == "true") { 
            layer.open({ 
                skin: "layui-layer-molv",
                title: "信息",
                content: "普通账号信息修改成功",
                btn: ['確定'],
                yes: function (layero) { 
                	// 关闭所有层
                    layer.closeAll();
                }
            });
            // 添加成功后重新加载table
            initLayPage();
        } else { 
    		...
    	}
    }

[Link 1]: https://www.layui.com/
[layui]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9xaW5pdS53Znh1bmkuY29tL2xheXVpL2xheXVpJUU2JThDJTg5JUU5JTkyJUFFLnBuZw?x-oss-process=image/format,png
[layui 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9xaW5pdS53Znh1bmkuY29tL2xheXVpL2xheXVpJUU0JUI4JThCJUU2JThCJTg5JUU5JTgwJTg5JUU2JThCJUE5JUU2JUExJTg2LnBuZw?x-oss-process=image/format,png
[layui 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9xaW5pdS53Znh1bmkuY29tL2xheXVpL2xheXVpJUU1JUE0JThEJUU5JTgwJTg5JUU2JUExJTg2LnBuZw?x-oss-process=image/format,png
[Link 2]: https://www.layui.com/demo/table/checkbox.html
[Link 3]: https://blog.csdn.net/q646926099/article/details/78797091