web-dev-qa-db-fra.com

Twitter Bootstrap Utilisez collapse.js sur les cellules de tableau [Presque terminé]

Je travaille sur une page de comptes qui répertorie les transactions (crédits et débits). J'aimerais que l'utilisateur puisse cliquer sur une ligne de la table et celle-ci s'agrandit en affichant plus d'informations.

J'utilise Twitter bootstrap) et j'ai jeté un coup d'œil à la documentation. Voici le résultat

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

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

Le seul problème est qu'il affiche les "informations de liste déroulante" au mauvais endroit, je voudrais ajouter dans une nouvelle ligne, au lieu d'imprimer en haut du tableau

J'ai également essayé d'ajouter une nouvelle ligne à un tableau (qui affiche uniquement la ligne et aucune action de réduction (uniquement appliquée à la première ligne)

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

Voir http://jsfiddle.net/ypuEj/

Salut, et merci pour votre aide

jqueryhtml5twitter-bootstrapcollapse
57
JamesWatling

Je ne suis pas sûr que vous ayez déjà dépassé cela, mais je devais travailler sur quelque chose de très similaire aujourd'hui et votre violon a fonctionné comme vous le demandez. En gros, ce que j'ai fait était de créer une autre rangée de table en dessous, puis d'utiliser l'accordéon. contrôle. J'ai essayé d'utiliser juste collapse mais je ne pouvais pas le faire fonctionner et j'ai vu un exemple quelque part sur SO qui utilisait un accordéon.

Voici votre violon mis à jour: http://jsfiddle.net/whytheday/2Dj7Y/11/

Puisque j'ai besoin de poster du code, voici à quoi devrait ressembler chaque "section" réductible ->

<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

Développant Tony réponse , et répondant également à Dhaval Ptl question , pour obtenir le véritable effet d'accordéon et permettre uniquement à une ligne d'être développée à la fois, un gestionnaire d'événements pour show. bs.collapse peut être ajouté comme ceci:

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

J'ai modifié son exemple pour le faire ici: http://jsfiddle.net/QLfMU/116/

17
hackel

Si vous utilisez la commande ng-repeat d'Angular pour renseigner le fragment jquery de hackel, cela ne fonctionnera pas si vous le placez dans l'événement de chargement de document. Vous devrez exécuter l'extrait de code après angular) aura terminé le rendu du tableau.

Pour déclencher un événement après que ng-repeat a rendu, essayez cette directive:

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

Exemple complet en forme d’angle: http://jsfiddle.net/ADukg/6880/

J'ai reçu la directive à partir d'ici: tilisez AngularJS uniquement à des fins de routage

3
Subie