龙空技术网

layui下拉菜单form.render局部刷新方法亲测有效

切图网本网 105

前言:

当前你们对“layui复选框批量删除”大致比较关切,兄弟们都想要学习一些“layui复选框批量删除”的相关资讯。那么小编也在网上收集了一些对于“layui复选框批量删除””的相关内容,希望你们能喜欢,同学们快快来了解一下吧!

切图网常年专注前端外包开发,这是在近期一次项目切图中遇到的,需要动态添加表单select元素,用到了layui插件,而layui对于一些常用表单元素比如下拉菜单,复选框,单选等都是有做美化的,这样好处就是好看,缺点是需要渲染,以及事件定义需要基于layui提供的方法来做,造成使用成本增加,不过对于layui上手很熟的人来说,基本影响不大。

动态添加的select元素需要进行渲染form.reander(),这样一来会导致整个表单的元素都被渲染,最直接的影响就是如果表单中select下拉菜单等有数据的时候,在渲染的这一刻数据就被清空了,这也很好理解,那么就需要找到一个能够局部更新的方法,如下:

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

【JavaScript】

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

确保代码能够生效,这两处必须要加入:

<div class=”layui-form” lay-filter=”test1″>

1、要加这个样式:class=”layui-form”

2、要加这个属性:lay-filter=”test2″

但是这样依旧无法解决,只对于js动态新增的select元素进行form渲染,对于前面的代码进行改良就可以了,代码如下:

$('.add').click(function(){var timestamp = new Date().getTime();$('#followlist').append('<div class="layui-form-item layui-row layui-form" lay-filter="t'+timestamp+'" >'+'<div class="layui-col-md10">'+'<div class="layui-item">'+'<label class="layui-form-label"></label>'+'<div class="layui-input-block">'+'<div class="layui-input-inline">'+'<select name="">'+'<option value="">请选择</option>'+'<option value="">1111</option>'+'<option value="">2222</option>'+'<option value="">3333</option>'+'</select>'+'</div>'+'<div class="layui-input-inline">'+'<select name="">'+'<option value="">请选择</option>'+'<option value="">aaaa</option>'+'<option value="">bbbb</option>'+'<option value="">cccc</option>'+'</select>'+'</div>'+'<div class="layui-input-inline" style="width: 100px;">'+'<button class="layui-btn followdel " type="button">'+'<i class="layui-icon layui-icon-close" style="color: #fff;"></i>'+'</button>'+'</div>'+'</div>'+'</div>'+'</div>'+'</div>');//form.render('select', 'test2');form.render('select', 't'+timestamp);return false;})

标签:form.render, layadmin, layui, select, 下拉菜单, 表单渲染

标签: #layui复选框批量删除 #layui下拉框取值