基于ID在Bootstrap Modal中显示对应数据详情的问题

1. 修改列表编辑按钮，绑定用户数据 #

把表格里的编辑按钮加上data-*属性，将当前行的用户数据绑定到按钮上，这样点击时能获取对应用户的信息：

<a href="" class="badge badge-success edit-btn" data-toggle="modal"
   data-target="#editRoleModal"
   data-id="<?= $u['id']; ?>"
   data-name="<?= $u['name']; ?>"
   data-email="<?= $u['email']; ?>"
   data-password="<?= $u['password']; ?>"
   data-role-id="<?= $u['role_id']; ?>">edit</a>

注：role_id需和你数据库中角色关联的字段名对应，若字段名不同自行调整。

2. 调整Modal表单结构 #

• 添加隐藏字段存储用户ID，用于提交时识别编辑目标
• 清空原有输入框的固定value值，改为动态填充
• 修正表单提交地址为编辑接口（根据你的后端路由调整，示例为admin/updateuser）

修改后的Modal代码：

<!-- Modal Edit-->
<div class="modal fade" id="editRoleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>

            <?= form_open_multipart('admin/updateuser'); ?>
            <!-- 隐藏用户ID字段，提交时传给后端 -->
            <input type="hidden" name="user_id" id="user_id">
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control" id="password" name="password" placeholder="Enter password">
                </div>
                <div class="mb-3">
                    <select name="menu_id" id="menu_id" class="form-control">
                        <option value="">Select Role</option>
                        <?php foreach ($user_role as $u) : ?>
                        <option value="<?= $u['id']; ?>"><?= $u['role']; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>

            </form>
        </div>
    </div>
</div>

3. 添加jQuery代码动态填充数据 #

在页面底部（或JS引入区域）添加以下代码，监听Modal显示事件，从点击按钮中获取数据并填充到表单：

$(document).ready(function() {
    // 监听编辑模态框的显示事件
    $('#editRoleModal').on('show.bs.modal', function(e) {
        // 获取触发模态框的按钮
        const triggerBtn = $(e.relatedTarget);
        // 从按钮的data属性中提取用户数据
        const userId = triggerBtn.data('id');
        const userName = triggerBtn.data('name');
        const userEmail = triggerBtn.data('email');
        const userPassword = triggerBtn.data('password');
        const userRoleId = triggerBtn.data('role-id');
        
        // 填充表单字段
        $(this).find('#user_id').val(userId);
        $(this).find('#name').val(userName);
        $(this).find('#email').val(userEmail);
        $(this).find('#password').val(userPassword);
        // 设置角色下拉框选中对应选项
        $(this).find('#menu_id').val(userRoleId);
    });
});

4. 后端处理编辑请求 #

确保你的后端admin/updateuser接口能接收user_id、name、email、password、menu_id参数，执行数据库更新操作即可。

注意事项 #

• 页面必须先引入jQuery和Bootstrap的JS文件，否则事件监听无效
• 若密码是加密存储的，建议不要在编辑框显示明文，需根据业务逻辑调整
• 所有字段名需和你的数据库表字段对应

内容的提问来源于stack exchange，提问作者Devlogia