web-dev-qa-db-ja.com

Twitter Bootstrapテーブルセルでcollapse.jsを使用[ほぼ完了]

取引（クレジットとデビット）をリストするアカウントページで作業しています。ユーザーがテーブルの行をクリックすると、詳細が表示されて展開されます。

私はTwitter bootstrapを使用しており、ドキュメントに目を通しました。これが私が得た結果です

<table class="table table-striped" id="account-table">
<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" data-parent="#account-table" class="">
        <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>
        <div id="demo1" class="demo out collapse">Demo1</div>
    </tr>

参照： http://jsfiddle.net/2Dj7Y/

唯一の問題は、間違った場所に「ドロップダウン情報」を表示することです。テーブルの上部に印刷するのではなく、新しい行に追加したいです

また、新しいテーブル行（行を表示するだけで、折りたたみアクションはありません（最初の行にのみ適用）を追加しようとしました）

 <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >
            <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 id="demo1" class="demo out collapse"> 
                    <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>

http://jsfiddle.net/ypuEj/ を参照してください

乾杯、そしてあなたの助けに感謝

jqueryhtml5twitter-bootstrapcollapse
57
JamesWatling

まだこれを過ぎているかどうかはわかりませんが、今日は非常によく似た作業をしなければならなかったので、あなたのフィドルはあなたが尋ねているように動作しましたコントロール。折りたたむだけを使用してみましたが、機能しませんでした。アコーディオンを使用したSOのどこかにサンプルがありました。

更新されたフィドルは次のとおりです。 http://jsfiddle.net/whytheday/2Dj7Y/11/

ここにコードを投稿する必要があるので、各折りたたみ可能な「セクション」は次のようになります->

<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="accordion-body collapse" id="demo1">Demo1</div>
    </td>
</tr>
106
Tony

Tonyの answer を展開し、Dhaval Ptlの question に応答して、真のアコーディオン効果を取得し、一度に1行のみを表示できるようにします。 bs.collapseは次のように追加できます。

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});

ここでこれを行うために彼の例を修正しました： http://jsfiddle.net/QLfMU/116/

17
hackel

Angularのng-repeatを使用して、テーブルハッケルのjqueryスニペットをドキュメントロードイベントに配置しても機能しません。 angularがテーブルのレンダリングを完了した後、スニペットを実行する必要があります。

Ng-repeatがレンダリングされた後にイベントをトリガーするには、このディレクティブを試してください：

var app = angular.module('myapp', [])
.directive('onFinishRender', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        if (scope.$last === true) {
            $timeout(function () {
                scope.$emit('ngRepeatFinished');
            });
        }
    }
}
});

角度の完全な例： http://jsfiddle.net/ADukg/6880/

ここからディレクティブを取得しました： ルーティングの目的でのみAngularJSを使用

3
Subie