layui form buglist

1.layui 动态生成 input，不显示

生成input后，form.render()、form.render("checkbox"); 重新渲染即可。

 

2.layui checkbox勾选，render只有第一次有效

attr  改成 prop;

.prop('checked', true) // 改变checkbox勾选状态

 

3.layui select 多选 ： 

 案例： https://yelog.org/layui-select-multiple/

  ① https://github.com/yelog/layui-select-multiple github 下载

1. 将项目中的 form.js 覆盖自己项目中的 form.js。

2. 引入下面css

 

 

4.layui select 动态生成 不显示

<select name="progress" lay-verify="required" lay-filter="progress"></select>



var data = [

     {value: 0, name: "111111"},

     {value: 1, name: "22222"}

];

var options = '';

data.forEach(function(item){

     options += '<option vlue="'+item.value+'">'+item.name+'</option>'

})

$('[name="progress"]').empty().append(options);

解决办法：添加以下代码，在页面动态生成后进行刷新页面

layui.use(['element','form'], function() {

    var element = layui.element, form = layui.form;

    element.init();

    form.render();

});

 

优化：

<select name="progress" lay-verify="required" lay-filter="progress">'+ aa() +'</select>



function aa(){

    var options = '';

    var data = [

         {value: 0, name: "111111"},

         {value: 1, name: "22222"}

    ];

    data.forEach(function(item){

         options += '<option vlue="'+item.value+'">'+item.name+'</option>'

    })

    return options;

}

 

5.layui layer-date动态生成 不显示日期选择框：添加 trigger: 'click'

解决办法：

// 日历弹框不弹出 无反应

laydate.render({

    elem: '#acceptDate'

});  



// 改成此处代码日历弹框一闪就没
layui.laydate.render({

    elem: '#acceptDate'

}); 



// 添加此处代码无效果

$('#acceptDate').removeAttr("lay-key");



// 添加trigger: 'click', 正常使用

layui.laydate.render({

    elem: '#acceptDate',

    trigger: 'click'

}); 

 

 

6.layui form表单赋值失败，替代方法：

var formCase = document.getElementById("formCase");

setTimeout(function(){

    $(formCase).find("input").each(function(i, ele) {

        $(this).val(data[$(this).attr("name")]);

    });

    $(formCase).find("select").each(function(i, ele) {

        $(this).val(data[$(this).attr("name")]);

    });

    $(formCase).find("textarea").each(function(i, ele) {

        $(this).val(data[$(this).attr("name")]);

    });

}, 100)

layui.form.render(null, "formCase");

 

 

7.layui input、select等元素属性设置失败，替代方法：

layui.jquery('.layui-form-iframe-case input').prop("disabled",false);

layui.jquery('.layui-form-iframe-case .layui-disabled').prop("disabled",true);

layui.jquery('.layui-form-iframe-case select').prop("disabled",false);

 

 

快速了解layui中layer的使用： https://www.cnblogs.com/web001/p/7470368.html