Layui组件使用（学习笔记）

1.引用脚本

1.1 layui脚本目录

1.2 引入文件

2.使用模块的方式

2.1. 调用模块可通过 layui.use 方法来实现，然后再通过 layui 对象获得模块接口

layui.use(['table', 'laydate', 'upload', 'layer'], function () {
      var layer = layui.layer;  //使用弹出层组件
      var table = layui.table;  //使用表格组件
      var laydate = layui.laydate;  //使用日期组件
      var upload = layui.upload; //使用上传组件
      
      .... 其它组件
});

3.模块使用

1. 弹出层

弹出层展示内容
方式1：字符拼接
var text = ``;

方式2：DOM元素
<script type="text/html" id="nodeClick_AddUser">
    <form class="layui-form" lay-filter="formAddUser" id="formAddUser" style="margin-top:5%;">
        <input type="hidden" name="ID" class="layui-input">
        <input type="hidden" :value="SumbitType" class="layui-input">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:30%;margin-left:-30px">用户名：<span style="color:red;">*</span></label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="add_name" class="layui-input" placeholder="请输入用户名" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:30%;margin-left:-30px">登陆名：<span style="color:red;">*</span></label>
            <div class="layui-input-inline">
                <input type="text" name="loginAccount" id="add_loginAccount" class="layui-input" placeholder="请输入登陆名" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:30%;margin-left:-30px">身份：<span style="color:red;">*</span></label>
            <div class="layui-input-inline">
                <select name="member" id="add_member">
                    <option value="">请选择身份</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:30%;margin-left:-30px">性别：<span> </span></label>
            <div class="layui-input-inline">
                <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" style="width:30%;margin-left:-30px">生日：<span style="color:red;"> </span></label>
            <div class="layui-input-inline">
                <input type="text" name="age" id="add_age" autocomplete="off" placeholder="请选择生日" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:30%;margin-left:-30px">地址：<span> </span></label>
            <div class="layui-input-inline">
                <input type="text" name="address" id="add_address" class="layui-input" placeholder="请输入地址" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:30%;margin-left:-30px">电话：<span style="color:red;">*</span></label>
            <div class="layui-input-inline">
                <input type="text" name="telephone" id="add_telephone" class="layui-input" placeholder="请输入电话" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:30%;margin-left:-30px">邮箱：<span> </span></label>
            <div class="layui-input-inline">
                <input type="text" name="mailbox" id="add_mailbox" class="layui-input" placeholder="请输入邮箱" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:30%;margin-left:-30px">头像：<span style="color:red;"> </span></label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" name="portrait" id="add_portrait"><i class="layui-icon">&#xe681;</i>上传头像</button>
            </div>
        </div>
    </form>
</script>

layer.open({
    type: 1,
    title: '新增用户', //设置弹出层标题
    area: ['25%', '80%'], //设置弹出层大小
    //skin: 'layui-layer-lan', //标题颜色
    //content:text, //1.字符拼接
    content: $("#nodeClick_AddUser").html(), //2.DOM元素
    shade: [0.8, '#393D49'], //弹出层颜色透明度
    btn: ["确认", "取消"], 
    success: function () { //在弹出层打开之前，绑定数据
        //请求身份筛选数据
        $.ajax({
            url: "/UserManage/GetSearchMember",
            type: "post",
            success: function (vpResult) {
                var json = JSON.parse(vpResult);
                if (json.code == 0) {
                    $.each(json.data, function (index, value) {
                        var option = document.createElement("option"); //创建option标签
                        option = new Option(value.mb_grade, value.mb_di);
                        $('#add_member').append(option); // 下拉菜单里添加元素
                    });
                    form.render('select'); //重新渲染
                }
            }
        });

        //渲染日期
        laydate.render({
            elem: '#add_age'
            , format: 'yyyy-MM-dd HH:mm:ss'
            , isInitValue: true
        });

        //渲染上传
        upload.render({
            elem: '#add_portrait'
            , auto: false
            , accept: 'file' 
        });

        form.render(); //重新渲染
    },
    yes: function (index, layero) { //做提交功能
        var option = {
            url: '/UserManage/GetAddUser',
            type: 'post',
            success: function (data) {
                if (data.code == 0) {
                    $("#add_name").val("");
                    $("#add_age").val("");
                    $("#add_address").val("");
                    $("#add_telephone").val("");
                    $("#add_member").val("");
                    $("#add_mailbox").val("");
                    $("#add_portrait").val("");
                    UserManageVue.methods_renderingUserData();
                    layer.closeAll();
                }
                layer.msg(data.msg, {
                    time: 3000,
                });
            }
        };
        //from表单提交
        $("#formAddUser").ajaxSubmit(option);
    }
});

效果展示

在弹出获取上传的文件有点麻烦，可以用form表单提交；在后台可以拿到文件流

2. 表格

<div class="layui-card" style="margin-top:15px;">
     <div>
         <table class="layui-hide" id="UserManage_table_list" lay-filter="UserManage_table_list"></table>
     </div>
</div>

//1.初始化表格
table.render({
    elem: '#UserManage_table_list'
    , url: '/UserManage/GetSearchUser'
    , title: '用户管理列表'
    , method: 'post'
    , where: data //传给接口的参数
    , page: true //是否显示分页
    , limits: [10, 30, 100]
    , limit: 10 //每页默认显示的数量
    , cols: [[
          { type: 'numbers', title: '编号' }
        , { field: 'user_name', title: '用户名', width: 100 }
        , { field: 'user_loginAccount', title: '登陆名', width: 100 }
        , { field: 'user_sex', title: '性别', width: 60 }
        , { field: 'user_age', title: '年龄', Width: 100 }
        , { field: 'mb_grade', title: '身份', Width: 100 }
        , { field: 'user_telephone', title: '电话', Width: 100 }
        , { field: 'portrait', title: '头像url', Width: 100 }
        , { field: 'user_mailbox', title: '邮箱', Width: 100 }
        , { field: 'user_address', title: '地址', Width: 100 }
        , { field: 'creater', title: '创建人', Width: 100 }
        , { field: 'createTime', title: '创建日期', Width: 100 }
        , { fixed: 'right', title: '操作', toolbar: '#barUserManageData', width: 250 }
    ]]
});

//2.想要在表格中添加按钮，做编辑、删除。。。功能，初始时在绑定数据时使用函数“toolbar”指定Dome元素
<script type="text/html" id="barUserManageData">
    <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="SetUpRole"><i class="layui-icon">&#xe716;</i>角色</a>
    <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="editUser"><i class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteUser"><i class="layui-icon">&#xe640;</i>删除</a>
</script> 

//3.表格动作监听
table.on('tool(UserManage_table_list)', function (obj) {
    //想知道时什么动作，layui会返回绑定在Dom元素中的lay-event=""值
    var data = obj.data;
    //角色设置
    if (obj.event === 'SetUpRole') {
	}
	 //编辑用户
	 if (obj.event === 'editUser') {
	 }
	 //删除用户
	 if (obj.event === 'deleteUser') {
	 }
});     

3. 单选按钮动态绑定值

 <div class="layui-form-item">
     <label class="layui-form-label" style="width:30%;margin-left:-30px">性别：<span> </span></label>
     <div class="layui-input-inline">
         <input type="radio" name="sex" value="0" title="男">
         <input type="radio" name="sex" value="1" title="女">
     </div>
 </div>

$("input[name=sex][value=0]").attr("checked", data.user_sex1 == 0 ? true : false).next("div").addClass("layui-form-radioed");
$("input[name=sex][value=1]").attr("checked", data.user_sex1 == 1 ? true : false).next("div").addClass("layui-form-radioed");

4.总结

• 在使用layui模块时，样式出不来一定要使用重新渲染样式
  form.render(‘select’); 渲染指定模块
  form.render(‘select’); 渲染所有模块
• 模块使用时一定要引用出模块
  layui.use([‘layer’], function () {});
• 动作一定不要忘记使用监听和配置监听
  lay-filter=“UserManage_table_list”
  form.on(‘select(test)’, function(data){});

5.脚本文件

链接：https://pan.baidu.com/s/1GNMmkQpxUou0VbValI3wHQ
提取码：rhzw