LayUI编辑表单回显简单实现
在网上看了好多文章实现的都太复杂,在b站看视频发现一个简单的实现方法。
LayUI官网文档说明
事件监听的时候其实控制台是拿到数据的,所以我们只要根据lay-filter属性输出就行。
监听代码块,可以输出查看,点击编辑按钮
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data; //获得当前行数据
var jsonData = JSON.stringify(data);
if (obj.event === 'edit') {
console.log(obj)
直接用form.val()方法实现回显,一行代码实现。
<!-- 修改信息的弹出层 -->
<div class="layui-form layuimini-form" lay-filter="edit">
<div class="layui-form-item">
<label class="layui-form-label required">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">身份证号码</label>
<div class="layui-input-block">
<input type="text" name="idCard" lay-verify="required|identity" lay-reqtext="身份证号码不能为空" placeholder="请输入身份证号码" value="" class="layui-input">
</div>
</div>
</div>
实现
var index = layer.open({
title: '编辑用户',
type: 1,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: [openWH[0] + 'px', openWH[1] + 'px'],
offset: [openWH[2] + 'px', openWH[3] + 'px'],
content: content,
success:function () {
//表单数据回显
form.val("edit",data);
}
});