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/

Приветствия и спасибо за вашу помощь

Ответы

Ответ 1

Я не уверен, что ты уже прошел мимо этого, но мне пришлось работать над чем-то очень похожим сегодня, и я заставил твою скрипку работать так, как ты спрашиваешь, в основном то, что я сделал, это сделать еще одну строку таблицы под ней, а затем использовал аккордеонный контроль. Я попытался использовать просто крах, но не смог заставить его работать и увидел пример где-то на 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>

Ответ 2

Развернувшись на Tony answer, а также отвечая Dhaval Ptl question, чтобы получить настоящий аккордеон эффект и только позволяют развернуть одну строку за раз, обработчик событий для show.bs.collapse можно добавить так:

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

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

Ответ 3

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

Полный пример в angular: http://jsfiddle.net/ADukg/6880/

Я получил директиву отсюда: Используйте AngularJS только для целей маршрутизации