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

Question

我正在使用引导表(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

您认为可以使用引导表库在子表中增加列吗？如果是这样，有人能举个例子吗？我感谢你的帮助。

谢谢你，Ravi Hasija

Answer 1

是的，因为传递到detailView的内容就是所使用的内容，所以如果在那里创建/使用的表有更多的列，它将显示这些列。

这就是为什么没有“子表”选项，只有detailView以及传递甚至动态创建所需内容的能力。

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

http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-桌子。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只是打印了一个

无论父表是什么，您在detailView中放入的任何表都是所使用的。

只要使用F12来查看扩展几行后的输出。