Bootstrap table 子 table 有附加列

Question

我正在使用 bootstrap table (http://bootstrap-table.wenzhixin.net.cn/)，我遇到了嵌套子 table 的情况。在我的 subtable 中，我会有多行，每个 subtable 中有一个额外的列。如下所示：

    #   |   Project     |   Number of Lines
+   1   |   ABC         |   15,000

        #   |   Project     |   Repo    |   Number Of Lines
    +   1   |   ABC         |   abc     |   1500

            #   |   Project     |   Repo    |   Language    |   Number Of Lines
            1   |   ABC         |   abc     |   java        |   1000
            2   |   ABC         |   abc     |   xml         |   500

    +   2   |   ABC         |   def     |   1440
    +   3   |   ABC         |   ghi     |   1200
    +   4   |   ABC         |   kbc     |   1700

+   2   |   DEK         |   15,000
+   3   |   TREM        |   15,000
+   4   |   BER         |   15,000

您认为使用 bootstrap-table 库可以在 subtable 中添加额外的列吗？如果可以，有人可以举个例子吗？感谢您的帮助。

谢谢，拉维哈西嘉

Answer 1

是的，因为无论你传递给 detailView 的是什么，所以如果 table 你 create/use 有更多的列，它会显示它们。

这就是为什么没有 'subtable' 选项，只有 detailView 以及传递甚至动态创建您想要的任何内容的能力。

http://bootstrap-table.wenzhixin.net.cn/documentation/

http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html

<div class="container">
    <h1>Sub Table</h1>
    <p>Use <code>onExpandRow</code> event to handle your detail view.</p>
    <table id="table"
           data-detail-view="true">
        <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>
<script>
    var $table = $('#table');
    $(function () {
        buildTable($table, 8, 1);
    });
    function expandTable($detail, cells) {
        buildTable($detail.html('<table></table>').find('table'), cells, 1);
    }
    function buildTable($el, cells, rows) {
        var i, j, row,
                columns = [],
                data = [];
        for (i = 0; i < cells; i++) {
            columns.push({
                field: 'field' + i,
                title: 'Cell' + i,
                sortable: true
            });
        }
        for (i = 0; i < rows; i++) {
            row = {};
            for (j = 0; j < cells; j++) {
                row['field' + j] = 'Row-' + i + '-' + j;
            }
            data.push(row);
        }
        $el.bootstrapTable({
            columns: columns,
            data: data,
            detailView: cells > 1,
            onExpandRow: function (index, row, $detail) {
                expandTable($detail, cells - 1);
            }
        });
    }
</script>

使用索引打印列，不通过 url 或其他方式传递任何数据。

但你可以清楚地看到 buildTable 只是打印出一个 <table> 并在 OnExpandRow 被触发时调用新 table 上的 bootstrapTable 初始化代码，它会在下一个 OnExpandRow 上再次调用 buildTable，并无限循环。

你放入 detailView 中的任何 table 都将被使用，无论父 table.

展开几行后，只需使用 F12 即可查看输出。

Bootstrap table 子 table 有附加列

Bootstrap table with subtables with additional columns

twitter-bootstrap

bootstrap-table