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()方法中加入這一行

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的樣式中加上：

參考：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();
                    }
                });