layui——小问题汇总及例子(2020.4.5)

1.layui.table组件使用，关于右侧的defaultToolbar,如果需要使用自定义工具栏方法，layui需要更新到官方2.5.5版本的layui。版本问题有时很常见。

参考：https://www.cnblogs.com/30go/p/11809287.html

2.layui.table自动加序号,在table.render()方法中加入这一行

,{ type: 'numbers', title: '序号', width: 80, fixed: 'left' }//序号列

3.layer.confirm用法;

https://blog.csdn.net/qq_36850813/article/details/80410036

4.layer.prompt例子：

layer.prompt({
  formType: 0,
  title: '新建分类',
  area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});

5.layui label字数多时自动换行的解决办法

在layui-form的样式中加上：

white-space:nowrap!important;

参考：https://blog.csdn.net/qq_38098125/article/details/103381481

6.layui.table使用重载时，如果表格初次加载时使用异步数据接口(url),那么在使用表格重载方法reload时，必须也使用异步数据接口(url)，来来重载表格，如果使用静态数据data重载，无法重载，必须重新使用render重新渲染表格！！！巨坑

7.使用layui动态添加select框的问题：

layui的select 若已经给了选项的数据，它还会动态生成另外一段代码 <dl class="layui-anim layui-anim-upbit"/>，若想自己添加动态的数据，则我们也需要添加 <dl class="layui-anim layui-anim-upbit"/>的选项数据，否则，select会失效。

8.layer中select选项过多的显示问题，iframe类型弹窗

解决办法：

覆盖样式 .layui-form-select dl { height: 400%; }
通过设置下拉框高度height 直接限定

9.layui.table使用静态数组渲染表格，如果使用复选框，在使用头部工具栏按钮时，表格会自动将该静态数组的对应项数据添加两条属性

	LAY_TABLE_INDEX: 0
	LAY_CHECKED: true

所以当下次还使用静态数组渲染表格时，该项数据的复选框会被自动选中。

解决办法：在头部工具栏按钮的event事件处理中，使用obj对象的data值为数组重新赋值，这里的数据是干净的。

10.layui.table常用templet：

简单示例：

	 , {
                        field: 'entity_status_id', title: '状态', sort: true, width: 85, templet: function (d) {
                            switch (d.entity_status_id) {
                                case 1:
                                    return '空闲中';
                                case 2:
                                    return '使用中';
                                case 3:
                                    return '报修中';
                                case 4:
                                    return '报废中';

                            }
                        }
                    }

10.layui表单提交后清空，重置表单数据

// 清空表单 （“addGoodsForm”是表单的id）
                        $("#addGoodsForm")[0].reset();
                        layui.form.render();

参考：https://blog.csdn.net/chenxihua1/article/details/85264312

11.使用layer.msg开启弹窗后要关闭弹窗时，将parent.layer.closeAll();一定写在其回调方法中。例子：

//开启遮罩
                layer.load(5, { shade: [0.5, "#5588AA"] });
                debugger
                $.post('/User/GrantRoleOP', d, function (result) {
                    if (result.success == true) {
                        //debugger
                        console.info("记录条数：" + result.totalCount);
                        //设置弹窗显示内容，图标、展示时间，以及结束时执行的方法。
                        //此处结束时关闭该弹窗
                        layer.msg(result.message, { icon: 1, time: 2000 }, function () {
                            layer.closeAll("loading");
                            parent.layer.closeAll();
                        });
                       

                    }
                    else {

                        //layer.closeAll("loading");
                        //debugger
                        layer.msg(result.message, { icon: 2, time: 2000 }, function () {
                            layer.closeAll("loading");
                            parent.layer.closeAll();
                        });
                        
                        console.info("记录条数：" + result.totalCount);
                        //parent.layer.closeAll();
                    }
                });