Développement et la réduction de la rangée de table (tr) à l'aide de jquery
J'ai une table avec des actifs et des inactifs, des éléments. Ce tableau est rempli dynamiquement à partir de la base de données. Je suis en train d'ajouter un interrupteur à bascule pour les inactifs seulement des éléments dans mon tableau et afficher tous les éléments actifs. Je veux dire, je veux vous montrer tous les éléments actifs et faites glisser la bascule inactifs seulement des éléments dans mon tableau.
<div class="alertsList">
<table width="100%">
<tbody>
<tr>
<th></th>
<th>Id</th>
<th>From</th>
<th>Action</th>
<th>State</th>
<th>time</th>
<tr class="alertRow">
<td></td>
<td>1025973</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="InActive">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="InActive">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
</tbody>
</table>
</div>
$('.alertRow.InActive').Parent.click(function () {
$(this).nextUntil('tr.td.InActive').slideToggle(1000);
});
Comment puis-je faire..?
Vérifier simplement si vous avez envisagé d'une manière plus simple (et un peu stupide) solution. Est-il une option pour gérer ces deux réseaux séparés? À la fois de travailler de façon autonome? De cette façon, la fonction de bascule permettra de réduire à masquer et d'afficher le type d'une opération. Active la grille restera toujours vu, et de vous cacher et de montrer les Inactifs séparément. Tout ce que vous devez faire est sûr, c'est que les styles sont appliqués de façon que la largeur des colonnes restent les mêmes pour les deux grilles. Toutes mes excuses si c'est trop simpliste d'une solution.
OriginalL'auteur Kurkula | 2014-09-29
Vous devez vous connecter pour publier un commentaire.
Vous avez eu quelques problèmes avec votre sélecteurs:
Cela devrait fonctionner de la même manière que vous le souhaitez.
Malheureusement, loin, de l'animation de la slideToggle est concerné, les tables ont tendance à avoir une restriction de style à eux. Dans ce cas, le slideToggle s'anime pas en raison de la hauteur de la ligne de la
tr
éléments. Vous pouvez définir latr
line-height
etheight
manuellement les propriétés dans le CSS, mais il pourrait vous causer une certaine mise en forme de la douleur dans l'avenir. Voici un exemple violon.Quelque chose comme cela? jsfiddle.net/3pakpw88/8
OriginalL'auteur Dan-Nolan
Comme mentionné dans un précédent post, vous devez définir le
line-height
etheight
propriétés de style de latr
balise pour les effets d'animation pour travailler.Ici est un exemple qui permet de basculer tous les "Inactifs" rangées à l'aide d'un bouton.
CSS:
HTML:
JS:
OriginalL'auteur angusf
Une solution simple pour cela serait, la liaison de données dans un mode que les actifs qui vient en premier, puis les inactifs (utiliser le tri pour les mêmes).
Si il n'est pas possible, alors vous pouvez utiliser le code ci-dessous pour les classer (pour info cela ne peut fonctionner que pour ceux des éléments qui sont déjà présents dans les DOM et doit être exécuté qu'une seule fois)
Puis ajouter l'Icône de réduction et le développement de celles qui sont Cachées
Enfin, ajouter le clic même de la dynamique de l'ajout d'une icône comme ci-dessous,
Espère que cela aide 🙂
OriginalL'auteur D.T.
Comme T J a dit dans sa réponse, c'est compliqué à animer la hauteur d'une ligne de tableau (voir cette réponse ou cette réponse pour hacks autour d'elle, qui impliquent l'emballage de chaque contenu de la cellule dans un
<div>
).Vous pouvez passer de l'animation tout à fait, et tout simplement de cacher ou d'afficher les inactifs lignes :
Si vous voulez un peu de visual bonbons pour le signal de la cacher à l'utilisateur, je conseille
.fadeToggle()
qui va travailler tout de suite :violon
Comme un supplément note : si vous pouvez modifier le code qui génère la table (par exemple : le PHP ou ruby (ou quel que) du code), essayer de mettre la
active /inactive
classe sur le ligne (le<tr>
nœud) plutôt que de l'intérieur de la cellule (le<td>
nœud) :Ce serait plus facile des règles dans votre css et js :
OriginalL'auteur LeGEC