layui表单数据渲染

本文取自layui官方文档form表单模块的文档+自己的例子

有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 form.render(type, filter); 方法即可,。

第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:

内容
select
刷新select选择框渲染
checkbox
刷新checkbox复选框(含开关)渲染
radio 刷新radio单选框框渲染
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
      

第二个参数:filter,为 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助该参数,对表单完成局部更新。

html

<div class="layui-form" lay-filter="test1">
  …
</div>
 
<div class="layui-form" lay-filter="test2">
  …
</div>

js

form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态

注意要先给form设置变量

var form = layui.form

例子

用layui的下拉菜单,实现动态元素插入

将请求响应回来的数据传给模板引擎,再把循环好的样式填入对应的盒子里,最后更新全部的表单元素

html部分

    <script type="text/html" id="wenzhang">
        <option value="">所有分类</option>
        {{each data}}
        <option value="{{$value.Id}}">{{$value.name}}</option>
        {{/each}}
    </script>

js部分

var htmlStr2 = template('wenzhang', res)
$('[name=cate_id]').html(htmlStr2)
form.render()

上一篇:React10.11-13学习笔记


下一篇:React三大属性之一——state 属性