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

您认为使用bootstrap-table库在子表中添加其他列是否可行？如果是这样，有人可以提供一个例子吗？感谢您的帮助。

谢谢你， Ravi Hasija

Answer 1

是的，因为你传递给detailView的是什么，所以如果你创建/使用的表有更多的列，它会显示它们。

这就是为什么没有'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>仅打印bootstrapTable并在该新表上调用OnExpandRow初始化代码，调用{{1}在下一个buildTable上再次使用，并且无限制地使用。

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

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

包含附加列

1 个答案: