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

深藏阁楼爱情的钟 2023-10-09 21:12 32阅读 0赞

**问题描述**

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

**解决**

`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 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` 属性：

3、监听：

具体步骤：

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

> 参考：

*  [layui 表单回显数据，修改table表格数据][layui _table]
 *  [layer.open方法][layer.open]

[layui _table]: https://blog.csdn.net/qq_40319394/article/details/88915871
[layer.open]: https://blog.csdn.net/qq_37335220/article/details/82024066