如何使用Bootstrap在div中展示grid或table并实现点击加号展开子表格功能

实现方案 #

1. 结构调整 #

• 给每一行的首个单元格预留图标位，直接使用内联符号/ SVG 作为加减号图标，无需引入额外资源
• 每个主行下方新增一个全列宽的展开容器，默认设置为隐藏状态，容器内部用于放置子 grid 或 datatable

2. 交互逻辑实现 #

如果是原生JS开发，参考代码如下：

结构示例

<!-- 主行结构 -->
<div class="grid-main-row">
  <div class="grid-cell"><span class="toggle-icon">+</span></div>
  <div class="grid-cell">数据列1</div>
  <div class="grid-cell">数据列2</div>
  <div class="grid-cell">数据列3</div>
</div>
<!-- 对应展开行，默认隐藏 -->
<div class="grid-expand-row" style="display: none;">
  <!-- 此处插入你需要展示的子grid/table -->
</div>

交互代码示例

// 绑定所有展开图标的点击事件
document.querySelectorAll('.toggle-icon').forEach(icon => {
  icon.addEventListener('click', function() {
    // 获取当前主行对应的展开行
    const expandRow = this.closest('.grid-main-row').nextElementSibling
    const isHidden = expandRow.style.display === 'none'
    // 切换显示状态和图标
    expandRow.style.display = isHidden ? 'block' : 'none'
    this.textContent = isHidden ? '-' : '+'
  })
})

如果是基于Vue/React等框架开发，逻辑更简单：

• 给每条行数据新增isExpand布尔类型字段，默认值为false
• 点击图标时切换当前行isExpand的取值
• 通过isExpand的值控制展开容器的显隐和图标切换即可

3. 样式适配注意点 #

• 展开容器的宽度需要和主grid宽度保持一致，避免出现错位
• 若需要平滑展开效果，可以将display切换逻辑替换为max-height配合overflow: hidden实现过渡动画
• 子grid的列宽可按需调整，也可设置为和主grid列宽对齐，视觉一致性更好

内容的提问来源于stack exchange，提问作者Nguyen Tuan Anh