layui 表单编辑弹窗表单数据回显【二】

问题描述

需求：表格的每一行都有一个 编辑 按钮，点击可以修改这一行数据；需要实现的效果就是：点击时弹出一个表单，数据自动填充到表单中，这就是数据回显功能。

解决

lay-filter 属性 + layer.open() 弹窗

1、首先新建一个页面层，里面包含要弹出的表单：

<!-- 数据表格 -->
<section class="content">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</section>


<!-- 页面层 -->
<div class="box box-danger" style="display:none;" id="show_div">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>编辑角色</legend>
    </fieldset>

    <!-- 给 form 表单添加 lay-filter 属性 -->
    <form class="layui-form" id="addForm" method="post" lay-filter="layui-edit-form">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="name" autocomplete="off"
                        placeholder="请输入角色名"
                        class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" lay-verify="remark" autocomplete="off" placeholder="请输入备注"
                        class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">详情</label>
            <div class="layui-input-block">
                <input type="text" name="details" lay-verify="details" autocomplete="off" placeholder="请输入详情"
                        class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="enable" lay-skin="switch" lay-filter="switchTest"
                        lay-text="ON|OFF">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">角色标识</label>
            <div class="layui-input-block">
                <input type="text" name="code" required lay-verify="code" lay-verify="required" autocomplete="off"
                        placeholder="请输入角色标识"
                        class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="edit_role">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

2、给 form 表单添加 lay-filter 属性：

<form class="layui-form" id="addForm" method="post" lay-filter="layui-edit-form">

3、监听：

<script src="/static/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table
            , form = layui.form;
        var loadingMsg = layer.msg('数据请求中', {icon: 16, scrollbar: false, time: 0});

        table.render({
            elem: '#test'
            , url: '{{ url_for("rbac_bp.rolelistresource") }}'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , cellMinWidth: 120  // 单元格最新宽度，全局
            , title: '用户数据表'
            , cols: [[
                {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'name', title: '名称', edit: 'text'}
                , {field: 'remark', title: '备注', edit: 'text'}
                , {field: 'details', title: '详情', edit: 'text'}
                , {field: 'enable', title: '是否开启', edit: 'text'}
                , {field: 'code', title: '角色标识', edit: 'text'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , id: 'testReload'
            , page: true
            , done: function (res, curr, count) {
                layer.close(loadingMsg);
            }
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除？', function (index) {
                    var doc_id = data["id"]
                    deleteRole(doc_id);

                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                var index = layer.open({
                    type: 1,
                    title: "编辑角色",
                    shadeClose: true,
                    area: ['880px', '580px'],
                    content: $("#show_div"),
                    success: function () {
                        // 数据回显
                        form.val("layui-edit-form", {
                            "name": data.name,
                            "remark": data.remark,
                            "details": data.details,
                            "enable": data.enable,
                            "code": data.code,
                        })
                    }
                })

                // 动态传递数据
                setFormValue(obj, data);
            }
        });

        // 表格重载
        function tableReload() {
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        }

        // 监听编辑角色提交
        function setFormValue(obj, data) {
            form.on("submit(edit_role)", function (new_obj) {
                // new_obj 为修改后的对象，obj、data 为修改前对象、数据
                $.ajax({
                    type: "PUT",
                    url: "/api/rbac/roles/" + data.id,
                    data: JSON.stringify(new_obj.field),
                    cache: false,
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (resp) {
                        if (resp.msg === "success") {
                            layer.alert('数据修改成功！', {icon: 1}, function (index) {
                                tableReload();
                                parent.layer.closeAll(); //关闭所有弹窗
                            });
                        } else {
                            layer.alert('数据修改失败', {icon: 5});
                        }
                    }
                });
            })
        }
        
    });

</script>

具体步骤：

• 监听数据表格行工具事件，它可以拿到每一行数据 data
• 弹出页面层，利用 form.val() 函数对每一个输入框进行填充，注意需要在 success 中填充

参考：

• layui 表单回显数据，修改table表格数据
• layer.open方法