Twitter Bootstrap использовать свернуть.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">0.00</td>
        <td class="text-error"></td>
        <td class="text-success">0.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">0.00</td>
            <td class="text-error"></td>
            <td class="text-success">0.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">0.00</td>
                    <td class="text-error"></td>
                    <td class="text-success">0.00</td>
                </tr>    

        </tr>

см.http://jsfiddle.net/ypuEj/

ура, и спасибо за вашу помощь

3 54
jquery html5 twitter-bootstrap collapse

3 ответа:

Я не уверен, что вы уже прошли это, но мне пришлось работать над чем-то очень похожим сегодня, и я получил вашу скрипку, как вы просите, в основном то, что я сделал, это сделать еще одну строку таблицы под ним, а затем использовать управление аккордеоном. Я попытался использовать просто коллапс, но не смог заставить его работать и увидел пример где-то на так что использовал аккордеон.

вот ваша обновленная скрипка: 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">0.00</td>
    <td class="text-error"></td>
    <td class="text-success">0.00</td>
</tr>

<tr>
    <td colspan="6" class="hiddenRow">
        <div class="accordion-body collapse" id="demo1">Demo1</div>
    </td>
</tr>
96

расширение на Тони ответ, а также отвечая на Даваль птл-х вопрос, чтобы получить истинный эффект аккордеона и разрешить одновременно расширять только одну строку, можно добавить обработчик событий для show.bs.collapse следующим образом:

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

Я изменил его пример, чтобы сделать это здесь:http://jsfiddle.net/QLfMU/116/

14

Если вы используете Angular ng-repeat для заполнения таблицы фрагмент jQuery hackel не будет работать, поместив его в событие загрузки документа. Вам нужно будет запустить фрагмент кода после того, как 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