Bootstrap di Twitter Utilizzare collapse.js nelle celle di tabella [Almost Done]

Question

Sto lavorando a una pagina di account che elenca le transazioni (crediti e debiti). Vorrei che l'utente potesse fare clic su una riga della tabella e si espande mostrando più informazioni.

Sto usando Twitter bootstrap e di aver preso visione della documentazione e questo è il risultato che ho

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

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

L'unico problema è il fatto che mostra le "informazioni a discesa" in Nel posto sbagliato, vorrei aggiungere una nuova riga, invece di stampare nella parte superiore della tabella

Ho anche provato ad aggiungere in una nuova riga di tabella (che visualizza solo la riga e nessuna azione di compressione (applicata solo alla prima 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> 

Vedi http://jsfiddle.net/ypuEj/

Cheers, e grazie per il vostro aiuto

Answer 1

Non sono sicuro di aver ottenuto oltre questo ancora, ma ho dovuto lavorare su qualcosa di molto simile oggi e ho fatto funzionare il tuo violino come mi stai chiedendo, in pratica quello che ho fatto è stato creare un'altra fila di tavoli sotto di essa, e poi ho usato il controllo della fisarmonica. Ho provato ad usare solo il collasso ma non riuscivo a farlo funzionare e ho visto un esempio da qualche parte su SO che usava la fisarmonica.

Ecco il vostro violino aggiornamento: http://jsfiddle.net/whytheday/2Dj7Y/11/

Da quando ho bisogno di inserire il codice qui è quello che ogni "sezione" pieghevole dovrebbe essere simile ->

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

Ampliando Tony answer, e anche rispondendo Dhaval Ptl's question, per ottenere il vero effetto fisarmonica e consentire l'espansione di una riga alla volta, è possibile aggiungere un gestore eventi per show.bs.collapse in questo modo:

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

ho modificato il suo esempio per fare questo qui: http://jsfiddle.net/QLfMU/116/

Answer 3

Se stai usando ng-repeat di angolare per popolare jquery frammento del Hackel tavolo non funziona ponendolo in caso di carico documento. Avrai bisogno di eseguire lo snippet dopo che angular ha finito di renderizzare la tabella.

per attivare un evento dopo ng-repeat ha reso provare questa direttiva:

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

esempio completo in angolare: http://jsfiddle.net/ADukg/6880/

ho ricevuto la direttiva da qui: Use AngularJS just for routing purposes