Bootstrap-table实现可展开行：Java Velocity端点页面技术咨询

我看你目前是用Velocity渲染HTML页面，基于Bootstrap v3.3.7和Bootstrap-table v1.12.1实现带展开行的表格，已经在用hiddenRow和collapse的思路——这其实是Bootstrap Table原生支持的行展开功能的常见实现方式，我给你梳理下更规范的写法，避免踩坑：

一、确保依赖资源正确引入 #

建议将依赖文件下载到项目本地（避免外部外链的不稳定问题），完整的资源引用如下：

<!-- 引入jQuery 2.x版本 -->
<script src="/static/js/jquery.min.js"></script>
<!-- Bootstrap v3.3.7 核心样式 -->
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<!-- Bootstrap v3.3.7 核心脚本 -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- Bootstrap Table v1.12.1 样式 -->
<link href="/static/css/bootstrap-table.css" rel="stylesheet">
<!-- Bootstrap Table v1.12.1 核心脚本 -->
<script src="/static/js/bootstrap-table.js"></script>
<!-- 行展开扩展（部分版本需单独引入） -->
<script src="/static/js/bootstrap-table-expand.js"></script>

二、Velocity模板中的表格结构实现 #

1. 主表格配置 #

在Velocity里渲染主表格时，启用Bootstrap Table原生的detailView属性（这是实现行展开的核心配置），同时指定展开内容的渲染函数：

<table id="mainTable" 
       data-toggle="table"
       data-detail-view="true"
       data-detail-formatter="formatDetailTable">
    <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">名称</th>
            <th data-field="description">描述</th>
        </tr>
    </thead>
    <tbody>
        <!-- Velocity循环渲染主表格行 -->
        #foreach($item in $mainDataList)
        <tr>
            <td>$item.id</td>
            <td>$item.name</td>
            <td>$item.description</td>
        </tr>
        #end
    </tbody>
</table>

2. 子表格渲染函数 #

在页面的<script>标签中定义formatDetailTable函数，用来生成展开区域的子表格内容，这里提供两种常见实现方式：

function formatDetailTable(index, row) {
    // 方式1：直接用Velocity渲染好的子表格HTML（适合子数据随主数据一起返回的场景）
    var subTableHtml = `
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>子项ID</th>
                    <th>子项名称</th>
                    <th>子项值</th>
                </tr>
            </thead>
            <tbody>
                #foreach($subItem in $row.subDataList)
                <tr>
                    <td>$subItem.subId</td>
                    <td>$subItem.subName</td>
                    <td>$subItem.subValue</td>
                </tr>
                #end
            </tbody>
        </table>
    `;
    return subTableHtml;

    // 方式2：AJAX异步加载子表格数据（适合子数据需要单独查询的场景）
    // return '<div id="subTable-' + row.id + '"></div>';
    // 可配合detailOpen事件触发加载：
    // $('#mainTable').on('detail-open.bs.table', function (e, index, row, $detail) {
    //     $('#subTable-' + row.id).bootstrapTable({
    //         url: '/api/sub-data/' + row.id,
    //         columns: [{data: 'subId'}, {data: 'subName'}, {data: 'subValue'}]
    //     });
    // });
}

三、优化你当前的hiddenRow + collapse方案 #

如果你坚持用手动控制展开的方式，可以优化代码避免样式冲突：

<!-- 主表格行，添加点击触发展开的属性 -->
<tr class="clickable-row" data-toggle="collapse" data-target="#subRow-$item.id">
    <td>$item.id</td>
    <td>$item.name</td>
    <td>$item.description</td>
</tr>
<!-- 展开的子行，默认隐藏 -->
<tr class="hiddenRow">
    <td colspan="3">
        <div id="subRow-$item.id" class="collapse">
            <!-- 子表格内容 -->
            <table class="table table-striped">
                <thead>
                    <tr><th>子项ID</th><th>子项名称</th></tr>
                </thead>
                <tbody>
                    #foreach($subItem in $item.subData)
                    <tr><td>$subItem.id</td><td>$subItem.name</td></tr>
                    #end
                </tbody>
            </table>
        </div>
    </td>
</tr>

添加自定义样式提升交互体验：

.clickable-row {
    cursor: pointer;
}
.hiddenRow td {
    padding: 0 !important;
    border-top: none !important;
}

四、关键注意事项 #

• 版本兼容性：Bootstrap v3.3.7和Bootstrap-table v1.12.1是稳定兼容的，不要混用Bootstrap v4+版本，会导致样式错乱。
• 模板变量校验：Velocity循环渲染时，要确保$mainDataList、$row.subDataList等变量不为空，可添加#if($mainDataList)判断避免空渲染。
• 性能优化：如果子数据量较大，优先选择AJAX异步加载的方式，避免主页面加载过慢。

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