带有带有附加列的子表的引导表答案

【问题标题】：Bootstrap table with subtables with additional columns带有带有附加列的子表的引导表
【发布时间】：2015-12-30 16:30:54
【问题描述】：

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

    #   |   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

您认为使用引导表库可以在子表中添加额外的列吗？如果是这样，有人可以提供一个例子吗？感谢您的帮助。

谢谢你，拉维哈西娅

【问题讨论】：

请贴一些代码，这样对你也有帮助
请更新此线程，接受答案或通过评论提供详细信息或编辑为什么它不回答您的问题

标签： twitter-bootstrap bootstrap-table

【解决方案1】：

是的，因为您传递给 detailView 的任何内容都是使用的，因此如果您创建/使用的表有更多列，它将显示它们。

这就是为什么没有“子表”选项的原因，只有 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 时在该新表上调用bootstrapTable 初始化代码，这会在下一个OnExpandRow 上再次调用buildTable，并且等到无限。

无论父表如何，您放入detailView 的表都是使用的。

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

【讨论】：