如何在Modal中显示Grid.js表格？数据无法加载问题求助

针对点击按钮打开Modal后Grid.js表格无数据的问题，以下是具体排查和修复方案：

核心问题分析 #

1. PHP输出的JavaScript数组语法错误：循环生成表格数据时，最后一条数据末尾会多出一个逗号，导致JS解析失败，表格无法初始化。
2. 重复渲染Grid实例：每次打开Modal都会创建新的Grid对象，容器内堆积多个实例引发显示异常。
3. 缺失Grid.js样式文件：仅引入Grid.js的JS文件，未加载对应CSS，导致表格结构存在但样式不显示，看起来像是没有数据。
4. Modal尺寸计算问题：Grid.js在Modal显示前可能无法正确计算容器尺寸，需要在Modal完全显示后触发渲染并强制刷新。

修复后的完整代码 #

HTML部分 #

<td>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Issue Book</button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Book List</h5>
                </div>
                <div class="modal-body">
                    <div id="modal-table"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</td>

<!-- 新增Grid.css引入 -->
<link rel="stylesheet" href="../gridjs.min.css">
<script src="../jquery-3.6.4.min.js"></script>
<script src="../jquery.dataTables.min.js"></script>
<script src="../gridjs.umd.js"></script>

JavaScript & PHP部分 #

<script>
// 保存Grid实例，方便销毁
let gridInstance = null;

function displayModal() {
    const tableContainer = document.getElementById("modal-table");
    // 清空容器并销毁旧实例
    tableContainer.innerHTML = '';
    if (gridInstance) {
        gridInstance.destroy();
    }

    gridInstance = new gridjs.Grid({
        columns: ["", "Books", "ISBN No", { name: 'Category' }, { name: 'Author' }, "Location Rack"],
        data: [
            <?php
            $query = $conn->query("SELECT * FROM `books` WHERE `ID`='".$_GET['id']."';");
            $dataRows = [];
            if ($query->num_rows > 0) {
                while ($row = $query->fetch_assoc()) {
                    // 把每行数据组装成JS字符串，存入数组
                    $dataRows[] = '[gridjs.html(`
                        <form action="" method="post">
                            <input type="hidden" name="book_id" value="'.$_GET['id'].'"/>
                            <button type="submit" class="btn1" name="submit" value=""><i class="fas fa-edit"></i>Borrow Book</button>
                        </form>
                    `), gridjs.html(`<img src="data:'.$row['image_name'].';base64,'.base64_encode($row['image_data']).'" alt="" width="90" height="105" style="border: 3px solid red"><br>'.$row['BKNAME'].'`), "'.$row['ISBNNO'].'", "'.$row['CATEGORY'].'", "'.$row['AUTHOR'].'", "'.$row['LOCRACK'].'"]';
                }
            }
            // 用implode拼接数组，避免末尾多余逗号
            echo implode(',', $dataRows);
            ?>
        ]
    }).render(tableContainer);

    // 强制刷新Grid尺寸
    setTimeout(() => {
        gridInstance.refresh();
    }, 100);
}

// Modal完全显示后渲染表格
$('#exampleModal').on('shown.bs.modal', function () {
    displayModal();
});

// 关闭Modal时销毁Grid实例
$('#exampleModal').on('hidden.bs.modal', function () {
    if (gridInstance) {
        gridInstance.destroy();
        gridInstance = null;
    }
});
</script>

关键修复点说明 #

1. 修复JS数组语法：用PHP的implode方法拼接数据行，避免循环末尾产生多余逗号，确保JS语法正确。
2. 管理Grid实例生命周期：创建全局变量保存Grid实例，每次渲染前清空容器并销毁旧实例，避免重复渲染；Modal关闭时销毁实例释放资源。
3. 添加Grid.js样式：引入gridjs.min.css，确保表格样式正常加载。
4. 强制刷新尺寸：渲染后延迟调用refresh方法，确保Grid.js能正确计算Modal显示后的容器尺寸。

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