jquery - Twitter Bootstrap Usa colapso.js en las celdas de la tabla

collapse table row bootstrap 3

Question

Estoy trabajando en una página de cuentas que enumera transacciones (créditos y débitos). Me gustaría que el usuario pueda hacer clic en una fila de la tabla y se expande mostrando más información.

Estoy usando Twitter bootstrap y he revisado la documentación y este es el resultado que tengo

<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>

Ver: http://jsfiddle.net/2Dj7Y/

El único problema es que muestra la "información desplegable" en el lugar equivocado, me gustaría agregar en una nueva fila, en lugar de imprimir en la parte superior de la tabla

También intenté agregar una nueva fila de la tabla (que solo muestra la fila, y ninguna acción de contracción (solo se aplica a la primera fila)

 <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>

Ver http://jsfiddle.net/ypuEj/

Saludos, y gracias por tu ayuda

Answer 1

Ampliando la answer de Tony, y también respondiendo a la question Dhaval Ptl, para obtener el verdadero efecto de acordeón y solo permitir que una fila se expanda a la vez, se puede agregar un controlador de eventos para show.bs.collapse como sigue:

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

Modifiqué su ejemplo para hacer esto aquí: http://jsfiddle.net/QLfMU/116/

Answer 2

No estoy seguro de que hayas superado esto todavía, pero hoy tuve que trabajar en algo muy similar y conseguí que tu violín funcionara como lo preguntas, básicamente lo que hice fue hacer otra fila debajo de la mesa, y luego usé el acordeón controlar. Intenté utilizar el colapso pero no pude hacerlo funcionar y vi un ejemplo en alguna parte de SO que usaba el acordeón.

Aquí está su violín actualizado: http://jsfiddle.net/whytheday/2Dj7Y/11/

Ya que necesito publicar el código aquí es lo que debería ser cada "sección" colapsable ->

<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>

Answer 3

Si está utilizando ng-repeat de Angular para rellenar la tabla, el fragmento jquery de hackel no funcionará colocándolo en el evento de carga de documentos. Tendrá que ejecutar el fragmento después de que angular haya terminado de renderizar la tabla.

Para desencadenar un evento después de que ng-repeat haya procesado, pruebe esta directiva:

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'');
            });
        }
    }
}
});

Ejemplo completo en angular: http://jsfiddle.net/ADukg/6880/

Obtuve la directiva desde aquí: use AngularJS solo para propósitos de enrutamiento