如何在点击链接时使用Bootstrap/AdminLTE动态生成模态对话框

整体逻辑和你猜测的一致，通过自定义属性存储唯一标识，JS监听触发事件后请求后端获取对应内容渲染到模态框即可，以下是分步实现代码：

步骤1：修改表格链接代码，添加自定义属性存储设备标识 #

给a标签添加data-did存储唯一设备ID、data-hostname存储主机名，同时添加专属类名方便JS识别：

if ($numrows){
            while( $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC) ) {
        
            echo '  <tr>';
            echo '      <td>' . $row['did'] . '</td>';
            // 修改此行
            echo '      <td><a href="javascript:void(0)" class="device-modal-trigger" data-did="'.$row['did'].'" data-hostname="'.$row['hostname'].'" data-toggle="modal" data-target="#modal-default">' . $row['hostname'] . '</a></td>';
            echo '      <td>' . $row['os'] . '</td>';
            echo '      <td><span class="badge bg-success">Online</span></td>';
            echo '    </tr>';
            
            }
        }

步骤2：添加JS逻辑实现动态内容加载 #

AdminLTE默认自带jQuery，直接监听Bootstrap模态框的原生显示事件即可：

// 放在页面底部，或者DOM加载完成的回调里
$('#modal-default').on('show.bs.modal', function (event) {
  // 获取触发当前模态框的点击元素
  const triggerElement = $(event.relatedTarget);
  // 读取存在自定义属性里的设备信息
  const deviceId = triggerElement.data('did');
  const deviceHostname = triggerElement.data('hostname');
  const currentModal = $(this);

  // 先更新模态框标题，正文先显示加载态
  currentModal.find('.modal-title').text(`${deviceHostname} 设备详情`);
  currentModal.find('.modal-body').html('<p class="text-muted">内容加载中...</p>');

  // 发起AJAX请求获取对应设备的模态框内容
  $.post('get_device_modal.php', { did: deviceId }, function(response) {
    currentModal.find('.modal-body').html(response);
  }).fail(function() {
    currentModal.find('.modal-body').html('<p class="text-danger">内容加载失败，请刷新后重试</p>');
  });
});

步骤3：编写后端接口返回对应设备内容 #

新建get_device_modal.php文件，接收设备ID参数查询后返回对应HTML内容：

<?php
// 强制校验参数合法性，避免SQL注入
$deviceId = isset($_POST['did']) ? intval($_POST['did']) : 0;
if ($deviceId <= 0) {
    echo '<p class="text-warning">无效的设备ID</p>';
    exit;
}

// 这里替换为你自己的数据库连接配置
$serverName = "你的数据库地址";
$connectionInfo = ["Database" => "你的数据库名", "UID" => "数据库账号", "PWD" => "数据库密码"];
$conn = sqlsrv_connect($serverName, $connectionInfo);
if (!$conn) {
    echo '<p class="text-danger">数据库连接失败</p>';
    exit;
}

// 使用参数化查询避免注入风险
$sql = "SELECT * FROM 你的设备表名 WHERE did = ?";
$params = [$deviceId];
$stmt = sqlsrv_query($conn, $sql, $params);

if ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
    // 这里自定义你要在模态框里显示的内容结构
    echo '<div class="device-info">';
    echo '<p><strong>设备ID：</strong>'.$row['did'].'</p>';
    echo '<p><strong>主机名：</strong>'.$row['hostname'].'</p>';
    echo '<p><strong>操作系统：</strong>'.$row['os'].'</p>';
    // 其他需要展示的字段直接在这里输出即可
    echo '</div>';
} else {
    echo '<p class="text-warning">未找到对应设备信息</p>';
}

// 释放资源关闭连接
sqlsrv_free_stmt($stmt);
sqlsrv_close($conn);
?>

可选优化 #

如果模态框要展示的内容已经在当前页面的表格查询结果里，完全可以不用发起AJAX请求，直接把所有要展示的字段都存在a标签的data-*自定义属性里，JS直接读取后渲染到模态框即可，性能更高。

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