layui 弹出列表选择框选中一行数据将这行数据部分字段自动填写到页面的表单中去

你想要在 layui 中实现点击弹出列表选择框，选中一行数据后，把这行数据的部分字段自动填充到页面表单的功能，我这就为你提供完整的实现方案。

实现思路

页面结构：创建表单区域和触发弹出层的按钮，同时准备弹出层内的列表（使用 layui 的 table 组件）。
弹出层配置：点击按钮时，通过 layui 的 layer 组件弹出一个包含 table 的层。
列表数据交互：在 table 的行点击事件中，获取选中行的数据，将指定字段赋值到表单对应输入框，最后关闭弹出层。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Layui 单选列表选择并填充表单</title>
    <!-- 引入layui的CSS和JS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.16/css/layui.css">
    <script src="https://cdn.staticfile.org/layui/2.9.16/layui.js"></script>
</head>
<body>
    <div class="layui-form" lay-filter="myForm" style="padding: 20px;">
        <!-- 表单字段 -->
        <div class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-block">
                <input type="text" name="userId" id="userId" lay-verify="required" placeholder="请选择用户" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" id="userName" lay-verify="required" placeholder="请选择用户" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户年龄</label>
            <div class="layui-input-block">
                <input type="text" name="userAge" id="userAge" lay-verify="required" placeholder="请选择用户" class="layui-input" readonly>
            </div>
        </div>
        <!-- 触发按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="selectUserBtn">选择用户</button>
            </div>
        </div>
    </div>

    <script>
        layui.use(['layer', 'table', 'form'], function() {
            var layer = layui.layer,
                table = layui.table,
                form = layui.form,
                $ = layui.$;

            // 存储弹出层的索引，用于后续关闭
            var layerIndex = null;

            // 点击选择用户按钮，弹出列表层
            $('#selectUserBtn').click(function() {
                // 弹出层
                layerIndex = layer.open({
                    type: 1,
                    title: '选择用户',
                    area: ['800px', '500px'], // 弹出层大小
                    content: '<div id="userTable" style="padding: 10px;"></div>', // 弹出层内容为table容器
                    success: function() {
                        // 弹出层创建成功后，渲染table（添加单选框）
                        var tableIns = table.render({
                            elem: '#userTable',
                            id: 'userTable', // 给table设置唯一ID，用于后续获取数据
                            url: '', // 实际开发中替换为接口地址，这里用模拟数据
                            data: [ // 模拟列表数据
                                {id: 1, name: '张三', age: 20, gender: '男', address: '北京'},
                                {id: 2, name: '李四', age: 22, gender: '女', address: '上海'},
                                {id: 3, name: '王五', age: 25, gender: '男', address: '广州'}
                            ],
                            cols: [[ // 表头：新增type: 'radio'的单选列
                                {type: 'radio', fixed: 'left', width: 80}, // 单选框列，固定在左侧
                                {field: 'id', title: '用户ID', width: 80},
                                {field: 'name', title: '用户名', width: 100},
                                {field: 'age', title: '年龄', width: 80},
                                {field: 'gender', title: '性别', width: 80},
                                {field: 'address', title: '地址', minWidth: 200}
                            ]],
                            page: true, // 开启分页
                            limit: 10 // 每页显示条数
                        });

                        // 监听table的单选事件（核心：选中单选框时触发）
                        table.on('radio(userTable)', function(obj) {
                            // obj.data 是当前选中行的完整数据
                            var selectData = obj.data;
                            // 将数据填充到表单（只取id、name、age字段）
                            $('#userId').val(selectData.id);
                            $('#userName').val(selectData.name);
                            $('#userAge').val(selectData.age);
                            // 关闭弹出层
                            layer.close(layerIndex);
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>

代码关键部分解释

依赖引入：通过 CDN 引入 layui 的 CSS 和 JS 文件，这是使用 layui 的前提。
表单结构：创建了三个只读输入框（用户 ID、用户名、用户年龄）和一个 "选择用户" 按钮，输入框设置为只读是为了防止用户手动输入，只能通过选择列表填充。
弹出层与列表渲染 ：点击按钮时，通过layer.open创建弹出层，在弹出层的success回调中渲染 layui table，使用模拟数据展示列表（实际开发中替换为后端接口地址即可）。
行点击事件与数据填充 ：在 table 的done回调中，为表格的行添加点击事件，获取选中行的数据后，将指定字段（id、name、age）赋值到表单的对应输入框，最后关闭弹出层。
数据获取兼容：同时处理了复选框选择和直接行点击两种情况，确保能稳定获取选中行的数据。

注意事项

实际开发中，table 的url属性需要替换为你的后端接口地址，用于加载真实的列表数据。
若需要兼容更多场景（如多选），可以修改 table 的配置，添加复选框列，通过table.checkStatus获取多选数据后再处理。
表单字段的 ID 要与代码中赋值的 ID 保持一致，否则无法完成填充。

总结

核心步骤是弹出层创建 →列表渲染 →行点击获取数据 →表单填充 →关闭弹出层。
通过 layui 的layer组件实现弹出层，table组件实现列表展示，jQuery 选择器完成表单数据填充。
实际开发中需将模拟数据替换为后端接口数据，并根据需求调整表单字段和列表展示的字段。

代码关键部分解释

单选框列配置 ：在 table 的cols中添加了{type: 'radio', fixed: 'left', width: 80}列，type: 'radio'是 layui table 的原生单选配置，fixed: 'left'让单选框固定在列表左侧，提升用户体验。
单选事件监听 ：使用table.on('radio(userTable)', function(obj) {})监听单选框的选中事件，userTable是 table 的唯一 ID，与table.render中的id对应，obj.data直接获取选中行的完整数据，比之前的方式更稳定。
弹出层索引存储 ：将弹出层的索引存储在全局变量layerIndex中，避免在单选事件中因作用域问题无法关闭弹窗。
表单填充逻辑：获取选中数据后，通过 jQuery 选择器将指定字段赋值到表单输入框，逻辑与之前一致，但数据来源更规范。

注意事项

实际开发中，需将table.render中的url替换为后端接口地址，加载真实数据，模拟数据仅用于演示。
若需要调整单选框的样式或位置，可修改width、fixed等属性，比如fixed: 'right'可将单选框放在列表右侧。
确保 table 的id与单选事件监听中的radio(userTable)里的名称一致，否则监听事件会失效。

总结

核心优化点是添加 layui table 原生单选列 ，并通过radio事件监听获取选中数据，替代了原有的行点击方式。
关键步骤为：配置单选列→监听单选事件→获取数据→填充表单→关闭弹窗。
需保证 table 的唯一 ID 与事件监听的名称对应，否则单选事件无法触发。

layui 弹出 列表选择框 选中一行数据 将这行数据部分字段 自动填写到 页面的表单中去

实现思路

代码关键部分解释

注意事项

总结

代码关键部分解释

注意事项

总结

layui 弹出列表选择框选中一行数据将这行数据部分字段自动填写到页面的表单中去