LayUI 页面渲染 页面动态修改后渲染 忽略渲染

• 个人对 layui 页面渲染的理解

    1. 需要满足的条件

        表单体系所在的父元素加上class="layui-form"，这样你里面所包含的元素就可以被 layui 渲染 

    2. 渲染的本质

        原有的html标签不做改变，并对其进行隐藏，依据 layui 自身逻辑对 html代码进行修改，变成 layui 所独有的样式和风格

       并可以添加 layui 自带的一些下拉框、switch、input等标签的监听

   3. 可以针对个别的html标签，忽略其渲染

      只需要在标签内添加   lay-ignore，例如下面的例子

<select lay-ignore >
    <option value="1">A</option>
    <option value="2">B</option>
</select>

  4. 对动态增加的元素进行渲染

1. 更新渲染全部
form.render(); 

2.按元素类型进行渲染
//刷新select选择框渲染
form.render('select'); 

//刷新checkbox选择框渲染
form.render('checkbox'); 

//刷新radio选择框渲染
form.render('radio'); 

3. 渲染特定的元素
//要渲染的元素
<select lay-filter="test">
    <option value="1">A</option>
    <option value="2">B</option>
</select>
//渲染
form.render('radio','test'); 

//注: lay-filter="test"  为 过滤器

• 动态新增 元素 渲染案例

//动态增加html段
$("#trainedAdd").click(function () {
    var trainedSss = "trainedS" + trainid.toString();
    $("#trained").append("<input type='text' class='layui-input trainedN' placeholder='培训名称'/>" +//动态添加文本  
    "<input type='text' placeholder='培训年度' class='layui-input DateYear trainedY'/>" +//动态添加日期控件
    "<select class='trainedS'  lay-filter='trainedS' >" +
        "<option value=''>请选择</option>" +
    "<option value='041001'>国家</option> <option value='041002'>省级</option>" +
        "<option value='041003'>市级</option><option value='041004'>县级</option></select>");//动态添加下拉框 
    //日期控件 渲染
    lay('.DateYear').each(function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: this,
            type: 'month',
        });
    });
    //下拉框渲染
    form.render('select');
});

 

 LayUI 官方网站：LayUI官方网站传送门