bootstrap-table：如何将一个 table 嵌套到另一个？

Question

我正在使用这个 bootstrap-table。我想将一个 table 嵌套到另一个

$(document).ready(function() {
  var t = [{
    "id": "1",
    "name": "john",
  }, {
    "id": "2",
    "name": "ted"
  }];


  //TABLE 1
  $('#summaryTable').bootstrapTable({
    data: t,
    detailFormatter: detailFormatter
  });

  function detailFormatter(index, row, element) {
    $(element).html(row.name);
    $(element).html(function() {
      //I was thinking of putting the code here, but I don't know how to do it so it will work,
      //except javascript, it needs to be put this html code <table id="detailTable"></table>

    });


    //   return [

    //    ].join('');
  }

  //TABLE 2
  var t2 = [{
    "id": "1",
    "shopping": "bike",
  }, {
    "id": "2",
    "shopping": "car"
  }];
  $('#detailTable').bootstrapTable({
    data: t2,
    columns: [{
      field: 'id',
      title: 'id'
    }, {
      field: 'shopping',
      title: 'Shopping detail'
    }, {
      field: 'status',
      checkbox: true
    }],
    checkboxHeader: false

  });
  $('#detailTable').on('check.bs.table', function(e, row, $el) {
    alert('check index: ' + row.shopping);
  });
  $('#detailTable').on('uncheck.bs.table', function(e, row, $el) {
    alert('uncheck index: ' + row.shopping);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>



<div class="container">
  <p>TABLE 1</p>
  <table id="summaryTable" data-detail-view="true">
    <thead>
      <tr>
        <th data-field="id" data-align="center" data-width="20px">id</th>
        <th data-field="name" data-align="center">Name</th>
      </tr>
    </thead>
  </table>
  <br>

  <p>TABLE 2</p>
  <table id="detailTable"></table>

</div>

这是我的演示的link：fiddle

有两个table。 Table 1 具有可扩展的行，我想将 Table 2 放入 table 1 的每一行。有一个名为 detailFormatter 的函数可以执行此操作，您可以在哪里 return 一个字符串或渲染一个元素（我正在玩它，但我不能让它工作）。对于这个演示，table 1 是用一些 html 代码创建的，而 table 2 仅使用 javascript，但是有这个启动 div <table id="detailTable"></table> （对我来说，哪种方式完成并不重要）。 所以，问题是如何将 table 2 放入 table 1 中，并有可能使用其事件（如选中或取消选中复选框），如 table 的演示所示2? 后来，我想使用这个事件 onExpandRow 所以当用户展开 table 1 的行时，它将从数据库中获取数据并填充出 table 2.

Answer 1

好吧，只需克隆您的 detailTable 并将其放入每个 row 和 detailFormatter 中，如下所示：

function detailFormatter(index, row, element) {
    $(element).html($('#detailTable').clone(true));
}

现在当您执行 clone 时会创建重复的 id，因此您只需按如下所示更改其 id 将其删除：

function detailFormatter(index, row, element) {
     $(element).html($('#detailTable').clone(true).attr('id',"tbl_"+row.id));
}

此外，您可以隐藏 #detailTable，因为您只是让它附加到另一个 table 中，一旦隐藏它，您需要将 show 添加到 cloned tables 因为所有属性都将被复制到 clone(true) 中，可以按如下方式完成：

function detailFormatter(index, row, element) {
    $(element).html($('#detailTable').clone(true).attr('id',"tbl_"+row.id).show());
}
//.....
//.....
//.....
//At the end
$("#detailTable").hide();

A complete DEMO

Answer 2

我找到了另一种使用（部分）动态 table 创建将一个 table 嵌套到另一个的方法（参考我在使用 bootstrap-table 时发布的问题）。

var expandedRow = row.id;
$(element).html(
    "<table id='detailTable"+expandedRow+"'><thead><tr><th data-field='id2' data-align='center' data-width='20px'>id2</th>" +
    "<th data-field='shopping' data-align='center'>Shopping detail</th>" +
    "<th data-field='status' data-checkbox='true'></th>" +
    "</tr></thead></table>");

$('#detailTable'+expandedRow).bootstrapTable({
  data: t2,
  checkboxHeader: false
});

我觉得这样比较独立。无需同时打开一个面板。事件和方法似乎工作正常。

Full code here.

bootstrap-table：如何将一个 table 嵌套到另一个？

bootstrap-table: how to nest one table into another?

javascript

jquery

twitter-bootstrap-3

bootstrap-table