Comment utiliser la fonction slideDown (ou show) sur une ligne de tableau ?

Question

J'essaie d'ajouter une ligne à un tableau et de faire glisser cette ligne pour l'afficher, mais la fonction slidedown semble ajouter un style display:block à la ligne du tableau, ce qui perturbe la mise en page.

Avez-vous des idées pour contourner ce problème ?

Voici le code :

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

Answer 1

Les animations ne sont pas prises en charge sur les lignes des tableaux.

Extrait de "Learning jQuery" de Chaffer et Swedberg.

---

Les lignes de tableau présentent des obstacles particuliers obstacles à l'animation, car les navigateurs utilisent des valeurs différentes (table-row et block) pour leur propriété d'affichage visible visible. Les méthodes .hide() et .show() sans animation, sont toujours toujours sûres à utiliser avec les rangées de tableau. À partir de la jQuery version 1.1.3, les méthodes .fadeIn() et .fadeOut() peuvent également être utilisées.

---

Vous pouvez envelopper le contenu de votre td dans un div et utiliser le slideDown sur celui-ci. Vous devez décider si l'animation vaut le balisage supplémentaire.

Answer 2

J'ai simplement enveloppé le tr de façon dynamique, puis je l'ai supprimé une fois le slideUp/slideDown terminé. L'ajout et la suppression d'une ou de deux balises, puis leur retrait une fois l'animation terminée, ne représentent qu'une faible surcharge.

SlideUp :

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: block;" />')
 .parent()
 .find('td > div')
 .slideUp(700, function(){

  $(this).parent().parent().remove();

 });

SlideDown :

$('#my_table > tbody > tr.my_row')
 .find('td')
 .wrapInner('<div style="display: none;" />')
 .parent()
 .find('td > div')
 .slideDown(700, function(){

  var $set = $(this);
  $set.replaceWith($set.contents());

 });

Je dois rendre hommage à fletchzone.com car j'ai pris son plugin et l'ai réduit à ce qui précède, merci mon pote.

Answer 3

Voici un plug-in que j'ai écrit pour cela, il s'inspire un peu de l'implémentation de Fletch, mais le mien est utilisé uniquement pour faire glisser une ligne vers le haut ou vers le bas (pas d'insertion de lignes).

(function($) {
var sR = {
    defaults: {
        slideSpeed: 400,
        easing: false,
        callback: false     
    },
    thisCallArgs: {
        slideSpeed: 400,
        easing: false,
        callback: false
    },
    methods: {
        up: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowUp" />');
            var currentPadding = $cells.css('padding');
            $cellContentWrappers = $(this).find('.slideRowUp');
            $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
                                                                                                                paddingTop: '0px',
                                                                                                                paddingBottom: '0px'},{
                                                                                                                complete: function () {
                                                                                                                    $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
                                                                                                                    $(this).parent().css({'display':'none'});
                                                                                                                    $(this).css({'padding': currentPadding});
                                                                                                                }});
            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);                                                                                                    
            return $(this);
        },
        down: function (arg1,arg2,arg3) {
            if(typeof arg1 == 'object') {
                for(p in arg1) {
                    sR.thisCallArgs.eval(p) = arg1[p];
                }
            }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
                sR.thisCallArgs.slideSpeed = arg1;
            }else{
                sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
            }

            if(typeof arg2 == 'string'){
                sR.thisCallArgs.easing = arg2;
            }else if(typeof arg2 == 'function'){
                sR.thisCallArgs.callback = arg2;
            }else if(typeof arg2 == 'undefined') {
                sR.thisCallArgs.easing = sR.defaults.easing;    
            }
            if(typeof arg3 == 'function') {
                sR.thisCallArgs.callback = arg3;
            }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
                sR.thisCallArgs.callback = sR.defaults.callback;    
            }
            var $cells = $(this).find('td');
            $cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
            $cellContentWrappers = $cells.find('.slideRowDown');
            $(this).show();
            $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });

            var wait = setInterval(function () {
                if($cellContentWrappers.is(':animated') === false) {
                    clearInterval(wait);
                    if(typeof sR.thisCallArgs.callback == 'function') {
                        sR.thisCallArgs.callback.call(this);
                    }
                }
            }, 100);
            return $(this);
        }
    }
};

$.fn.slideRow = function(method,arg1,arg2,arg3) {
    if(typeof method != 'undefined') {
        if(sR.methods[method]) {
            return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
        }
    }
};
})(jQuery);

Utilisation de base :

$('#row_id').slideRow('down');
$('#row_id').slideRow('up');

Passer les options de diapositives comme arguments individuels :

$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object

En gros, pour l'animation du glissement vers le bas, le plug-in enveloppe le contenu des cellules dans des DIV, les anime, puis les supprime, et vice versa pour le glissement vers le haut (avec quelques étapes supplémentaires pour se débarrasser du remplissage des cellules). Il renvoie également l'objet sur lequel vous l'avez appelé, de sorte que vous pouvez enchaîner les méthodes comme suit :

$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red

J'espère que cela aidera quelqu'un.

Answer 4

Vous pouvez essayer d'envelopper le contenu de la rangée dans une balise <span> et que votre sélecteur soit $('#detailed_edit_row span'); - un peu bricolé, mais je viens de le tester et ça marche. J'ai également essayé le table-row suggestion ci-dessus et cela n'a pas semblé fonctionner.

mise à jour : J'ai joué avec ce problème, et d'après toutes les indications, jQuery a besoin que l'objet sur lequel il effectue le slideDown soit un élément de bloc. Donc, pas de chance. J'ai pu créer un tableau où j'ai utilisé slideDown sur une cellule et cela n'a pas affecté la mise en page du tout, donc je ne suis pas sûr de la façon dont le vôtre est configuré. Je pense que la seule solution est de remanier le tableau de manière à ce qu'il accepte que cette cellule soit un bloc, ou tout simplement .show(); ce fichu truc. Bonne chance.

Answer 5

J'ai écrit un plugin jQuery qui vous permet de le faire. Vous pouvez ajouter et supprimer des lignes et il n'est pas nécessaire d'envelopper vos données avec un div ou quelque chose comme ça. Consultez-le à l'adresse suivante http://www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Le meilleur,

Fletch