LayUI编辑表单回显简单实现

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);

                    }

                });