bootstrap-table中detailView渲染功能无法正常工作求助

你的表格数据展示正常，但detailView无法展开的核心原因是：Bootstrap Table 1.22.0 对 Bootstrap 5 的支持需要额外引入专属适配插件，默认的bootstrap-table.min.js不包含Bootstrap 5的组件适配逻辑，导致展开按钮和折叠功能无法正常触发。

解决步骤 #

• 在现有脚本引入后，添加Bootstrap Table的Bootstrap 5适配插件
• 保持脚本引入顺序：jQuery → Bootstrap JS → Bootstrap Table JS → Bootstrap Table BS5 适配插件

修改后的完整代码 #

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap Table CSS -->
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.0/dist/bootstrap-table.min.css">

  <title>Dummy</title>
</head>

<body>

  <!-- Table -->
    <table id="table"></table>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
  <!-- Bootstrap Table JS -->
  <script src="https://unpkg.com/bootstrap-table@1.22.0/dist/bootstrap-table.min.js"></script>
  <!-- Bootstrap Table Bootstrap 5 适配插件 -->
  <script src="https://unpkg.com/bootstrap-table@1.22.0/dist/extensions/bootstrap5/bootstrap-table-bs5.min.js"></script>

  <script>
    function renderTable(data, tableId) {
      const $table = $(`#${tableId}`);

      // Initialize the table
      const options = {
        columns: [{
            field: "id",
            title: "ID",
          },
          {
            field: "name",
            title: "Name",
          },
        ],
        data: data,
        detailView: true,
        detailFormatter: function(index, row) {
          return `<p>Details for ${row.name}</p>`;
        },
      };

      $table.bootstrapTable(options);
    }

    const data = [{
        id: 1,
        name: "Item 1",
      },
      {
        id: 2,
        name: "Item 2",
      },
    ];

    renderTable(data, "table");
  </script>

</body>

</html>

补充说明 #

引入bootstrap-table-bs5.min.js后，插件会自动适配Bootstrap 5的折叠组件逻辑，detailView的展开按钮将正常显示并触发内容渲染，点击每行左侧的+图标即可展开详情内容。

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