web-dev-qa-db-fra.com

Ligne de tableau coulissant jQuery

Je construis un plugin jQuery personnalisé qui permet à l'utilisateur de supprimer des enregistrements dans une table en temps réel, entre autres choses. Lorsque les enregistrements sont supprimés, je voudrais que la couleur d'arrière-plan de la ligne du tableau supprimée devienne rouge, puis glisse hors de la vue.

Voici un extrait de mon code ci-dessous, qui ne fait aucune animation de changement de couleur, ni ne glisse sur la ligne. Cependant, il supprime la ligne lorsque ce qui est censé être l'animation de diapositive se termine. Quelques choses à savoir lors de l'examen du code ci-dessous:

  1. La variable "objet" est une référence jQuery à l'objet sur lequel vous avez cliqué et qui a déclenché l'opération de suppression.
  2. L'objet "object.parent (). Parent ()" est la ligne en cours de suppression.
  3. La classe CSS "deleteHighlight" contient la couleur qui transformera la ligne en couleur rouge.
  4. La méthode "addClass" utilise la méthode "addClass" de jQueryUI, pas celle de jQuery. Il permet un effet animé et un rappel.
object.parent().parent().addClass('deleteHighlight', 1000, function() {
//Fold the table row
  $(this).slideUp(1000, function() {
  //Delete the old row
    $(this).remove();
  });
});

Voici le HTML sur lequel cela s'exécute, rien de spécial:

<table class="dataTable">
<thead>
<tr>
<th>&nbsp;</th>
<th>Title</th>
<th>Content Snapshot</th>
<th>Management</th>
</tr>
</thead>

<tbody>
<tr class="odd" id="11" name="1">
<td class="center width50"><a class="dragger"></a><a class="visibilityTrigger eyeShow"></a></td>
<td class="center width150">Title</td>
<td>
<div class="clipContainer">Content</div>
<div class="hide contentContainer">Content</div>
<div class="hide URLContainer">my-url</div>
</td>
<td class="center width75"><a class="edit"></a><a class="delete"></a></td>
</tr>
</tbody>
</table>

Quelqu'un pourrait-il s'il vous plaît fournir un exemple de la façon dont je peux résoudre ce problème?

Merci pour votre temps.

javascriptjquerycssjquery-uijquery-animate
26
Oliver Spryn

Je soupçonne que c'est en partie un problème de navigateur. Vous ne devriez pas vraiment cibler <tr /> car les navigateurs les interprètent différemment. De plus, ils se comportent différemment des éléments de bloc.

Dans cet exemple: http://jsfiddle.net/lnrb0b/3t3Na/1/ votre code fonctionne partiellement en chrome. Le <tr /> est autorisé à styliser (contrairement à certaines versions IE) mais vous ne pouvez pas l'animer. Si vous le faites display:block pas de soucis, mais c'est un peu la poubelle comme table :)

Dans cet exemple: http://jsfiddle.net/lnrb0b/3t3Na/2/ vous verrez que j'ai animé le <td /> mais ils fonctionnent à peine et péniblement lentement.

Avoir un test de ceux-ci et je vais essayer de penser à une solution en attendant.

14
Stuart Burrows

La manière la plus élégante de gérer la glissière et le retrait est d'envelopper le contenu intérieur de chaque td avec un div, et de réduire simultanément le rembourrage du td et la hauteur du divs. Découvrez cette démo simple: http://jsfiddle.net/stamminator/z2fwdLdu/1/

7
Jacob Stamm

addClass n'accepte pas de fonction de rappel, car elle s'exécutait immédiatement. Je pense que vous voudrez peut-être quelque chose de plus comme ça.

object.parent().parent().addClass('deleteHighlight').slideUp(1000, function() {
    $(this).remove();
});
4
Dutchie432

Sûr que vous pouvez!

Enveloppez chaque td du tr que vous voulez glisser dans un div, puis faites glisser ces divs!

Bien sûr, vous devez animer les rembourrages (haut et bas) de chaque td.

Ici vous pouvez trouver un exemple complet ici:

http://jsfiddle.net/3t3Na/474/

Extrait de mon code source:

$('a').click(function(){
var object = $(this);
object.parent().parent().addClass('deleteHighlight', 1000, function() {
    $(this).find('td').each(function(index, element) {

    // Wrap each td inside the selected tr in a temporary div
    $(this).wrapInner('<div class="td_wrapper"></div>');

    // Fold the table row
    $(this).parent().find('.td_wrapper').each(function(index, element) {

    // SlideUp the wrapper div
    $(this).slideUp();

    // Remove padding from each td inside the selected tr
    $(this).parent().parent().find('td').each(function(index, element) {
        $(this).animate({
            'padding-top': '0px',
            'padding-bottom': '0px'
        }, function() {
            object.parentsUntil('tr').parent().remove();
        });
    });
});
2
Gianpiero Franchino

Pour une raison quelconque, le wrapInner () avec div ne fonctionnait pas pour moi, j'ai donc fait une solution moins élégante, où vous animez la taille de police de la ligne, puis la cachez, puis restaurez la taille de police à la normale pendant la rangée est invisible.

    this.trs
        .animate({ 'fontSize': '1px' }, 70)
        .slideUp(1)
        .animate({ 'fontSize': '12px'}, 10)
        ;

Je l'utilise pour animer des groupes de ressources de réduction/expansion dans les vues de calendrier fullcalendar.js + scheduler.js.

0
user6269864