Bootstrap -可折叠表-一次只需要展开一行

bd1hkmkf 于 8个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(96)

我创建了一个bootstrap可折叠表示例。下面是链接作为这个问题的评论。Fiddle
但在这里，它可以一次扩展多行。
但我需要一次只能展开一行，而要展开另一行时，前一个展开的行会自动折叠。
有可能吗？

我的密码：

<table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
        <tr>
            <th>#</th>
            <th>Date</th>
            <th>Description</th>
            <th>Credit</th>
            <th>Debit</th>
            <th>Balance</th>
        </tr>
    </thead>
    <tbody>
        <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
            <td>1</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$150.00</td>
            <td class="text-error"></td>
            <td class="text-success">$150.00</td>
        </tr>
        <tr >
            <td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="demo1"> Demo1 </div> </td>
        </tr>
        <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
            <td>2</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$11.00</td>
            <td class="text-error"></td>
            <td class="text-success">$161.00</td>
        </tr>
        <tr>
            <td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td>
        </tr>
        <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
            <td>3</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$500.00</td>
            <td class="text-error"></td>
            <td class="text-success">$661.00</td>
        </tr>
        <tr>
            <td colspan="6"  class="hiddenRow"><div id="demo3" class="accordian-body collapse">Demo3</div></td>
        </tr>
    </tbody>
</table>

twitter-bootstrap

来源：https://stackoverflow.com/questions/26340912/bootstrap-collapsible-table-need-to-expand-only-one-row-at-a-time

2条答案

按热度按时间

dgtucam11#

可以通过JavaScript，试试

$('.accordian-body').on('show.bs.collapse', function () {
    $(this).closest("table")
        .find(".collapse.in")
        .not(this)
        .collapse('toggle')
})

jsFiddle

赞(0）回复(0）举报 8个月前

lf3rwulv2#

对不起，伙计们，我有一个类似的问题与引导表，创建另一个表时，扩展行：

tableAulacodici.on('expand-row.bs.table', function (e, index, row, $detail) {

        
        $(this).closest("table")
        .find(".detail-view")
        .not(this)
        .collapse('toggle');
        
        $(".tableDetail").bootstrapTable('destroy');
        
        $detail.html('Loading from ajax request...');
        var attivi = row.ATTIVATE;
        var attivabili = row.NMAX_ATTIVABILI;
        var obj = "";
        obj += '<h4 class="titoloTabellaAulacodici"> Codici attivi: &nbsp ' + attivi + ' di ' + attivabili + ' ( ' + attivi + ' codici attivi su ' + attivabili + ' attivabili )</h4>'
            + '<table class="tableDetail tableDetail' + index + '" style="border:1px solid #dddddd;padding:1px"'
            + 'data-state-save="true" '
            + 'data-state-save-id-table="saveid"'
            + 'data-height="500" '
            + 'data-id-field="Codice"'
            + 'data-click-to-select="true" '
            + 'data-show-pagination-switch="false"'
            + 'data-pagination="false"'
            + 'data-page-list="[25, 50, 100, 200, all]"'
            + 'data-search="true" '
            + 'data-row-style="rowStyle"'
            + 'data-detail-view="false"'
            + 'data-detail-formatter="detailFormatter"'
            + 'data-show-refresh="false"'
            + 'data-url="json/data1.json">'
            + '<thead>'
            + '<tr class="headerDetail">'
            + '  <th data-field="codiceHardware" class="header" data-sortable="true" data-halign="center" data-align="center">CODICE HARDWARE</th>'
            + '  <th data-field="codiceHardwareVisibile" class="header macchinaAttiva" data-sortable="true" data-halign="center" data-align="center">CODICE PC</th>'
            + '  <th data-field="versioneAula" class="header" data-sortable="true" data-halign="center" data-align="center">VERSIONE AULA</th>'
            + '  <th data-field="vincolo" class="header" data-sortable="true" data-halign="center" data-align="center">VINCOLO</th>'
            + '  <th data-field="listatiAttivi" class="header listati" data-sortable="true" data-halign="center" data-align="center">LISTATI ATTIVI</th>'
            + '  <th data-field="dataInserimento" class="header" data-sortable="true" data-halign="center" data-align="center">DATA INSERIMENTO</th>'
            + '  <th data-field="dataAggiornamento" class="header" data-sortable="true" data-halign="center" data-align="center">DATA AGGIORNAMENTO</th>'
            + '  <th data-field="delete" class="header deleteDetails" data-sortable="false" data-halign="center" data-align="center"></th>'
            + '</tr>'
            + '</thead>';

        $detail.html(obj);

        $(".tableDetail" + index).bootstrapTable({
[..]
});

我尝试这样做，但不是一个好的解决方案：
$（this）.closest（“table”）.find（“.detail-view”）.not（this）.collapse（'toggle'）;
有人知道如何解决这个问题吗？我只想要一个扩展行。

赞(0）回复(0）举报 8个月前

我来回答

Bootstrap -可折叠表-一次只需要展开一行

2条答案

相关问题

热门标签

最新问答