layui的使用（table/form）——layui踩坑记录

深藏阁楼爱情的钟 2021-07-26 00:49 716阅读 0赞

公司之前的老系统是前后端不分离的MVC模式，是基于Layui开发的。

### 1.引入layui ###

引入文件的具体路径需要根据实际项目来。

### 2. 页面功能分析 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
页面结构如上图所示：  
可以看到页面中有button input select table等。

#### button的使用 ####

`<button class="layui-btn check" onclick="refresh()">刷新</button>`

刷新页面功能实现：

//刷新
    function refresh() { 
        window.location.reload();
    }

#### input的使用 ####

`<input type="text" style="width:300px;margin-right:10px;" name="name" id="name" class="sinput" placeholder="请输入供应商全称" autofocus="" maxlength="50" />`  
获取input中的内容可以通过`$('#name').val()`的方式来获取

#### select的使用 ####

<select name="type" lay-filter="aihao" id="type">
        <option value="">请选择供应商类型</option>
        <option value="1">原厂</option>
        <option value="2">代理</option>
        <option value="4">贸易</option>
    </select>

获取select中选择的内容可以通过`$('#type').val()`的方式来获取  
如果是需要通过接口获取select中的选项，然后动态渲染到页面中的话，则需要下面的方式：

layui.use(['form'], function () { 
    	var form = layui.form;
    	//调用接口获取数据
    	//$.get(接口地址，函数回调)
    	$.get(url + "Brand", function (res) { 
            console.log(res);
            if (res.success) { 
                var select = $("#brand");//TypeID为HTML标签ID
                $.each(res.data.items, function (index, item) { 
                    select.append(new Option(item.name, item.id));// 下拉菜单里添加元素 这个地方的参数，第一个是展示文字，第二个是value值
                });
                layui.form.render("select");
            }
        })
    })

这个地方花了我好久的时间，因为我开始用的是字符串拼接，模板字符串的方式我也用了，append和html的添加dom元素的方式都不生效，才百度到这个new Option的方式来处理……

#### 日期选择控件 ####

`<input type="text" class="sinput" id="time1" placeholder="审核通过开始时间">`  
使用方式如下：

layui.use(['laydate'], function () { 
    	var laydate = layui.laydate;
    	//执行一个laydate实例
        laydate.render({ 
            elem: '#time1' //指定元素
        });
    })

#### table的使用——这个内容很多 ####

分别是：表格的渲染，表格操作按钮的添加及判断展示，表格的重载（条件检索），表格操作按钮的触发等；

##### 表格的渲染 #####

html部分代码

<div style="min-height: 500px;" class="list_data_list">
       <table id="demo" lay-filter="test"></table> //表格要渲染的dom元素 id用于渲染表格，lay-filter="test"用于触发事件
       <script type="text/html" id="toolbarDemo"> //表格的操作按钮
           <div class="layui-btn-container"> //lay-event="update" 这种方式可以在监听表格操作按钮触发事件时能够监听到，ley-event的值可以自定义
               <button type="button" class="layui-btn layui-btn-sm" lay-event="view">查看</button>
               <button type="button" class="layui-btn layui-btn-sm" style="background:#409EFF" lay-event="update">修改</button>
               { { # if(d.state=='启用'){  }} //根据表格中的数据判断是否展示按钮
               <button type="button" class="layui-btn layui-btn-sm" style="background:red;" id="statusoff" lay-event="off">停用</button>
               { { # } }}
               { { # if(d.state=='禁用'){  }}
               <button type="button" class="layui-btn layui-btn-sm" style="background:green;" id="statuson" lay-event="on">启用</button>
               { { # } }}
               <button type="button" class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
           </div>
       </script>
    </div>

js部分的代码：

layui.use(['table', 'layer'], function () { 
    	var table = layui.table;
    	//第一个实例
            table.render({ 
                elem: '#demo'  //html接口中的table的id
                , height: tableHeight //这个我是动态改变的，例如浏览器clientHeight可视区域高度改变是的表格高度也相应改变，还有点bug
                , url: url + "Supplier" //数据接口
                , parseData: function (res) {   //由于接口返回的数据结构与table中默认的数据接口不太一样，因此通过这个函数进行处理
                    if (!res.success) {  //这个是容错，如果接口返回给我false，我需要弹窗提示错误信息及展示空数据
                        tableData = [];
                        layer.msg(res.message);
                        return { 
                            'code': res.code,
                            'data': [],
                            "count": 0,
                        }
                    }
                    let data = res.data.items;
                    data = getEndText(data, 'type', typemenu); //这个地方是调用了一个封装好的方法，将枚举数字改为文字，
                    data = getEndText(data, 'platform', platformmenu);
                    data = getEndText(data, 'isTemp', isTempmenu);
                    data = getEndText(data, 'source', sourcemenu);
                    data = getEndText(data, 'checkState', checkStatemenu);
                    data = getEndText(data, 'state', statemenu);
                    data = getEndText(data, 'rank', rankmenu);
                    data = getEndText(data, 'payType', payTypemenu);
                    data = getEndText(data, 'accountPeriod', accountPeriodmenu);
                    data = getEndText(data, 'riskLevel', riskLevelmenu);
                    data = getEndText(data, 'warehouseType', warehouseTypemenu);
                    tableData = data; 
                    return {  //最终返回的格式如下:
                        'code': res.code,
                        'data': data,
                        "count": res.data.total,
                    }
                }
                , page: true //开启分页
                , id: 'demoId' //指定table的id，后续可以通过这个id来进行表格的部分操作
                , loading: true //分页加载时展示加载中的提示
                , cols: [[ //表头
                    {  type: 'checkbox' }  //这个是最左侧的选择框
                    , {  field: 'id', title: '序号', width: 60 }
                    , {  field: 'code', title: '供应商代码', width: 100 }
                    , {  field: 'name', title: '供应商名称', width: 200 }
                    , {  field: 'type', title: '供应商类型', width: 100 }
                    , {  field: 'platform', title: '平台', width: 100 }
                    , {  field: 'source', title: '来源', width: 100 }
                    , {  field: 'contactName', title: '联系人姓名', width: 100 }
                    , {  field: 'contactTele', title: '联系电话', width: 150 }
                    , {  field: 'contactMobile', title: '联系手机号', width: 150 }
                    , {  field: 'contactAddress', title: '联系地址', width: 200 }
                    , {  field: 'isTemp', title: '临时供应商', width: 100 }
                    , {  field: 'middleman', title: '采购对接人', width: 100 }
                    , {  field: 'settleInTime', title: '审核通过时间', width: 200 }
                    , {  field: 'rank', title: '等级', width: 100 }
                    , {  field: 'state', title: '状态', width: 100,style:'color:red' }
                    , {  field: '', title: '操作', toolbar: "#toolbarDemo", fixed: 'right', width: 260 } //这个是操作按钮的位置，这个地方的toolbar需要跟html中的操作按钮的id保持一致，才能够将html按钮渲染到表格中
                ]],
                done: function (res) { 
                    console.log('done', res);
                    layer.close(index);
                }
            });
            //触发复选事件 checkbox对应的是复选框 test对应的是table表格中的lay-filter="test"
            table.on('checkbox(test)', function (obj) { 
            	//判断obj对象是否为空的方式：获取所有的keys为一个数组，如果数组长度为0，则表示是个空对象
            	// Object.keys(对象) 获取对象的key并返回一个数组
                if (!Object.keys(obj.data).length) { 
                // 如果是选中，则checked为true,如果是取消选中，则checked为false，这个可以打印一下obj的数据可以知道
                    if (obj.checked) { 
                        tableData.forEach(item => { 
                            selectObj.push(item.id) //我这边是需要获取到所有选中的对象中的id，并存储到一个数组中
                        })
    
                    } else { 
                        selectObj = [];
                    }
                }
                filterObj(obj); //如果是选中某项，则需要先判断是否已经包含此项，如果是取消某项，也需要先判断是否含有此项
                console.log(selectObj);//此处的selectObj是个id集合的数组，原谅我不严谨的起名方式……
            });
            function filterObj(obj) { 
                var len = selectObj.length;
                if (!obj.checked) { 
                    if (len) { 
                        if (selectObj.indexOf(obj.data.id) != -1) {  //判断数组中是否包含某一项，可以通过 arr.indexOf(元素)的方式来判断，如果结果等于-1，则表示没有该项，如果含有该元素，则结果是索引值，根据索引值，将取消选中的元素splice掉
                            selectObj.splice(selectObj.indexOf(obj.data.id), 1);
                        }
                    }
                } else { 
                    if (selectObj.indexOf(obj.data.id) == -1) { 
                        selectObj.push(obj.data.id);
                    }
                }
                selectObj.forEach((obj, index) => {  //遍历数组，如果其中有Undefined，则移除掉
                    if (obj == undefined) { 
                        selectObj.splice(index, 1);
                    }
                })
            }
         //触发操作事件 tool对应的就是操作按钮 test对应的是lay-filter="test"
         table.on('tool(test)', function (obj) { 
             var id = obj.data.id; //点击操作按钮，对应的是一行数据，这行数据就是obj.data
             switch (obj.event) {  // 这就是 lay-event="off" 集合的所有的操作按钮
                 case 'view': //如果lay-event="view"查看功能，通过layer.open打开一个弹窗展示详情
                     layer.open({ 
                         type: 2, //这块的具体数字可以看文档，我对样式没有太多的要求，先实现功能
                         icon: 1,
                         title: '查看信息', //弹窗提示的标题
                         maxmin: true,
                         area: ['1200px', '80%'],//宽高 如果设置为百分数，则根据浏览器的窗口来改变
                         content: "Edit", //这个地方需要指定一个html页面或者要给链接，我的Edit页面是放在同一个文件路径下，因此直接写文件名即可，不用指定扩展名后缀。
                         closeBtn: 1, //关闭按钮的样式
                         success: function (layero, index) {  //如果弹窗成功弹出，则执行下面的代码
                             console.log(layero, index); //如果要给弹窗传递数据，则可以通过
                             var obj = $(layero).find("iframe")[0].contentWindow;  //这个是固定写法
                             var body = layer.getChildFrame('body', index);//这个是固定写法
                             body.find(".query").val('id=' + id + '&state=look');//这个body对应的就是弹层本身，我是在弹层页面有个input组件，class类名为query，可以通过body.find('.query')的方式获取到，通过val进行赋值，赋值内容是自定义的，然后在弹层中，给这个input设置样式为：字体为白色，或者透明色，是不会展示出来的。 
                         },
                     });
                     break;
                 case 'delete': //
                     layer.confirm('确定删除此条数据吗？', {  icon: 3, title: '提示' }, function (index) { 
                         console.log(index);
                         if (index) { 
                             $.ajax({ 
                                 type: 'delete',
                                 url: url + 'Supplier?id=' + id,
                                 success: function (res) { 
                                     layer.msg("删除成功");
                                     searchTable();
                                 }
                             })
                         }
                         layer.close(index);
                     })
                     break;
                 case 'update':
                     layer.open({ 
                         type: 2,
                         icon: 1,
                         title: '编辑信息',
                         maxmin: true,
                         area: ['1200px', '80%'],//宽高
                         content: "Edit",
                         success: function (layero, index) { 
                             console.log(layero, index);
                             var obj = $(layero).find("iframe")[0].contentWindow;
                             var body = layer.getChildFrame('body', index);
                             body.find(".query").val('id=' + id + '&state=edit');
                         }
                     });
                     break;
                 case 'off':
                     layer.confirm('确定停用吗?', {  icon: 3, title: '提示' }, function (index) { 
                         $.ajax({ 
                             type: "PATCH",
                             url: url + "Supplier/Disable/" + id,
                             contentType: "application/x-www-form-urlencoded",
                             success: function (res) { 
                                 console.log(res);
                                 if (res.success) { 
                                     layer.msg('停用成功');
                                     setTimeout(() => { 
                                         layer.close();
                                         window.location.reload();
                                     }, 500)
                                 } else { 
                                     layer.msg(res.message)
                                 }
                             }
                         });
                     });
                     break;
                 case 'on':
                     layer.confirm('确定启用吗?', {  icon: 3, title: '提示' }, function (index) { 
                         $.ajax({ 
                             type: "PATCH",
                             url: url + "Supplier/UnDisable/" + id,
                             contentType: "application/x-www-form-urlencoded",
                             success: function (res) { 
                                 console.log(res);
                                 if (res.success) { 
                                     layer.msg('启用成功');
                                     setTimeout(() => { 
                                         layer.close();
                                         window.location.reload();
                                     }, 500)
                                 } else { 
                                     layer.msg(res.message)
                                 }
                             }
                         });
                     });
                     break;
             };
         });
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/35dbff3d6f824f808ca115ebb29872e1.png