Discussion :

[lexgotham]

Bonjour,

j'ai besoin de pouvoir réorganiser les colonnes d'un tableau en glissant-déposant les cellules d'en-tête du tableau (pas les cellules de données). Jusque là, tout va bien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$( ".tablex thead tr" ).sortable({
    containment: "parent",
    placeholder: "placeholder",
    helper: 'clone',
    axis: 'x',
    appendTo: '.tablex thead',
    start: function(e, ui) {ui.helper.hide();}
});

Le seul problème c'est que je ne peux voir bouger pendant le déplacement que le placeholder de l'entête du tableau. Pas toute la colonne. Rien de surprenant, c'est le comportement par défaut de sortable.
Mais j'aimerais que le placeholder soit TOUTE la colonne (ou autre solution pour un même résultat). Cela n'est pas documenté et je n'ai trouvé aucune discussion sur le net à ce sujet.

Y-a-til un moyen d'y parvenir?

J'ai bien tenté ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$( ".tablex thead tr" ).sortable({
    containment: ".tablex",
    placeholder: "placeholder",
    helper: 'clone',
    appendTo: '.tablex',
    start: function(e, ui) {
        ui.helper.hide();
        ui.placeholder.html('...recréer entièrement la colonne en html...');
    }
});

Mais alors, si j'ai bien une colonne comme placeholder, elle est visuellement confinée à l'intérieur de la cellule d'en-tête que je bouge. Pas moyen de faire en sorte que la colonne s'affiche parmi les autres colonnes du tableau.

De l'aide serait apprécié.

Merci

[Toufik83]

Il te faut un script js nommé sorttable.js (avec deux "t"), plus le sortable de jquery-ui.
Regarde cette page, plus précisément les exemples 4,6 et 7 correspondent à ce que tu cherches à faire.

[lexgotham]

Merci, ça a l'air d'être exactement ce qu'il me faut.
j'ai essayé et ça fait bien ce que je veux sauf que le placeholder de la colonne de data se tape en fin de tableau et ne bouge pas. Vu que ça fonctionne sur les exemples, je suppose que j'arriverai bien à le faire fonctionner chez moi. Je ne mets pas encore comme résolu mais le ferai dès que ça marche.
Merci beaucoup pour le tuyau!

[lexgotham]

J'ai trouvé la source du problème.

Dans l'exemple donné, l'auteur n'utilise pas les tag "<thead>" et mets les "<th>" directement dans le "<tbody>".
Sans cela, ça ne fonctionne pas (j'ai essayé sur son propre exemple) et donne le problème que j'ai: le placeholder de la colonne est déplacé en fin de tableau et y reste figé.
le problème c'est que j'utilise Datatables et ce dernier impose les theads dans les tableaux qu'il génère...
Donc même si c'est génial comme trouvaille (merci), ça ne règle pas mon problème.
A moins de savoir comment modifier le script de sorttable mais il n'est pas simple à comprendre pour moi.
Bref, c'était trop beau.

[Toufik83]

Une autre source utile., ils existent plusieurs plugins qui font ça, il faut juste chercher aux bons endroits.

Un exemple sur jsfiddle.

[lexgotham]

Merci pour ton aide. Celui-là non plus ne fonctionne pas (je l'avais déjà essayé).
En fait, j'en ai essayé une flopée avant de venir poser ma question. Ca fait des jours que je cherche.
Celui que tu as proposé en premier, je ne suis juste jamais tombé dessus (ce qui m'a surpris).
Mais tous les autres que j'ai essayé (et j'ai vraiment l'impression d'avoir fait le tour) sont en conflit avec dataTables.
Le dernier lien par exemple: il fonctionne mais il désactive l'accès aux tris de colonnes de dataTables, parce qu'il est exécuté au mousedown (et non au drag) alors que l'autre action l'est aussi. Il y a donc conflit.

En tous cas merci beaucoup pour ton aide.

[Toufik83]

Salut,
Tu peux mettre un exemple en ligne sur lequel tu mets ton dataTable (juste un exemple simple) ?, comme celui que j'ai mis sur jsfiddle.

A mon avis, tu peux le faire avec jQuery.dataTable en utilisant l'option colReorder mais il faut importer un script nommé colReorder.min.js (compressé) ou colReorder.js (non compressé), voir la documentation.

[lexgotham]

Merci pour le suivi.
Je te mets un exemple en ligne au plus vite aujourd'hui (début d'aprèm, le temps de faire une version simplifiée sur jsFiddle).
ColReorder existe bel et bien et ce serait super si je pouvais l'utiliser mais il n'affiche pas du tout la colonne en déplacement et il est très sommaire en terme d'options.
Raison pour laquelle j'essaye de trouver un autre script pour le remplacer et qui soit un rien plus souple à l'utilisation (la bibliothèque!que dataTables est trop fournie pour la customiser).
C'est dingue comme tout ce que j'ai essayé a toujours un truc qui cloche (en tous cas avec dataTables).
Je reviens vers toi dans la journée.
A+ et merci car je galère sévère sur ce coupe-là.

[lexgotham]

Alors voilà, j'ai créé plusieurs jsFiddle avec les cas de figure les plus classiques.
Chacun de ces jsFiddle est minimisé au maximum et est commenté dans la partie HTML pour expliquer le cas et le problème.

Classique (juste Datatables avec données dynamiques et tri par colonne, sans reorder. Permet de voir la base nécessaire de mon script)

colReorder (reorder natif de dataTables. Très basique et pas de déplacement visuel de la colonne. C'est fonctionnel mais pas user-friendly)

jQueryUI Sortable (seule l'en-tête bouge durant le drag mais déjà beaucoup mieux que colReorder)

sortTable (La colonne se déplace bien mais si th dans thead, le placeholder de la colonne reste coincé en fin de table. Le script ne reconnaît que le tbody or mes tableaux sont créés dynamiquement avec thead)

dragtable (super, exactement ce que je veux mais empêche le tri de la colonne car tout comme le tri, il se déclenche au mousedown. Il y a donc conflit).


J'espère que ces jsFiddle aideront à voir plus clair la prise de tête et, qui sait, peut-être pourrez-vous trouver une solution!
Les deux derniers me paraissent les plus aboutis pour ce que je veux faire et les plus accessibles car le js est assez court et clair. Mais ils dépassent quand même mes compétences.
Je sens que c'est facilement éditable ... mais pas à mon niveau.
Je pense malgré tout que dragTable est le plus prometteur car tout fonctionne...sauf qu'il ne doit se déclencher que sur un drag, pas sur un click.

Voici la partie du script de dragTable qui se déclenche au click:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
el.delegate(o.items, 'mousedown.' + self.widgetEventPrefix, function(e){
    ...
})

Merci pour l'aide en tous cas.

PS: j'ai également posté sur Stack Overflow pour demander comment transformer l'event mousedown en "drag" dans le script de dragtable (le mal nommé!). Comme vous pouvez le voir, je fais mes devoirs et essaye tant bien que mal. Mais sans succès. Si ça c'est possible alors mon problème est réglé.

[Toufik83]

Si on prend ton dernier exemple qui parait le mieux, je pense que j'ai identifié la source du problème.
En faite c'est un problème du css pas jQuery.

Au moment de mousedown ou clic sur l'entête du tableau, un <div class="dragtable-drag-wrapper" /> est généré par le plugin dragtable.js, et la classe dragable-drag-wrapper est définie dans dragtable-default.css comme suite

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.dragtable-drag-wrapper{
    position: absolute;
    z-index: 1000;
}

Ce div se met exactement sur la colonne qui correspond à l'entête sur lequel on a cliqué, c'est comme un masque, donc si on attribut un margin-top à la classe dragable-drag-wrapper margin-top: 40px;, là le trie fonctionne parce que le div se sépare de l'entête par-contre il y un comportement inattendu.
Bref voilà ton dernier exemple sur jsfiddle.

Edit : si tu veux que la colonne ne dépasse pas son conteneur, tu peux attribuer un overflow:hidden; à la classe .dataTables_wrapper

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.dataTables_wrapper {
  overflow: hidden;
}

[lexgotham]

Bonjour et merci beaucoup pour ta solution, très élégante.
Elle contourne superbement le problème et permet de faire un bon compromis.
Elle ne me satisfait par contre pas car j'aimerais que l'en-tête reste à sa place et ne se déplace pas vers le bas lors du déplacement.
Ce n'est pas un caprice mais bien un requirement car le "cahier des charges" veut que lors du déplacement, les données restent alignées verticalement pour pouvoir être comparables en temps réel avec les données des autres colonnes.

Par contre, grâce à toi, j'ai trouvé :-)
En bidouillant à partir de ton idée et en me concentrant sur le z-index, voici ce que j'ai fait:

dragTable

Et ça marche!

En fait je retire le z-index élevé du "dragtable-drag-wrapper" par défaut dans le css pour avoir accès au tri quand je clique, comme tu l'as brillamment suggéré.
Mais sur le click, je remets le z-index du "dragtable-drag-wrapper" au max après 150ms grâce à un setTimeout (que tu m'as inspiré), sans toucher au margin du placeholder.
Et hop!

Si on clique brièvement on a le tri, et si le mousedown dure plus de 150ms (à affiner), ce qu'on pourrait artificiellement assimiler à un début de drag, on a le dragtable qui se déclenche sans décalage visuel.
Ce n'est pas parfait car le tri est maintenant sensible à la durée du click (si, lors d'un click, le mouseup tarde à venir, le tri ne se fera plus) mais bon, ça reste une solution de secours qui fait assez bien son office. Sauf si on est un peu "mou" du click.

T'en penses quoi?
Des idées d'amélioration?
(j'attends de voir avant de mettre "résolu" au cas où on trouverait mieux encore mais c'est déjà pas mal du tout).

Merci beaucoup pour ton aide qui m'a été précieuse!

[Toufik83]

Bravo tu as tout compris et même mieux que moi , il va falloir documenter ça parce que il n y a pas 1 seule discussion sur le net qui parle de ce problème.

Pour l'amélioration, j'ai remarqué que la ligne $('.dragtable-col-placeholder td').css('visibility','hidden'); ne s'exécute pas, si tu la remplaces par "color","red", tu verras que ça ne changes pas de couleur.

D'après ce que je vois, tu veux modifier la propriété color du th afin que son texte ait la même couleur du background, et les td soient invisibles ? c'est ça ?

Si on veut utiliser l'objet "ui" qui est dans les fonctions start et stop, on peut traduire le code comme suite

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
start:function(e,ui){
      indo=ui.startIndex;
      var last=$('th:last-child').outerWidth();
      $('.dragtable-drag-col').width(last);
      setTimeout(function(){
               console.log("ui.start :",ui.column);//affiche les colonnes de ui
               $(ui.column)
                  .each(function(i){
                       if(i==0) $(this).css('color',"#444");//modifier couleur de th
                       else $(this).css({'opacity':'.2'}); //modifier l'opacity des td
                   });
                ui.dragDisplay.css('z-index','1000');// ui.dragDisplay correspond à $('.dragtable-drag-wrapper')
       },150) ;
},
stop:function(e,ui){
      console.log("ui.stop :",ui.column);
      setTimeout(function(){
          $(ui.column)
          .each(function(i){
               if(i==0) $(this).css("color","#eee");//rendre la couleur original du th
                else $(this).css("opacity","1"); //rendre l'opacity claire pour les td
           });
           ui.dragDisplay.css('z-index','-1');
      },100);
}

[lexgotham]

C'est parfait, merci!
Je suis vraiment très satisfait du résultat, grâce à toi, et ton amélioration rend le truc encore plus top.
Et oui, en effet, je suis très étonné que rien d'évident sur le web ne permette cette feature qui pourtant me semble répondre à une demande qui va de soi (en tous cas pour moi).

Merci beaucoup Toufik83.
Tu as passé pas mal de temps sur ce sujet et je te suis redevable car ça me retire une énorme épine du pied.

Bonne continuation à toi!

PS: pour ceux qui voudraient la même chose et comptent prendre les jsfiddle comme référence, il y a des chances qu'ils ne fonctionnent pas à l'avenir car le fichier jquery.dragtable.js, dragtable-default.css et sorttable.js utilisés viennent de mon propre serveur de test temporaire (il n'y a pas de cdn qui les héberge) et risquent donc de disparaître et rendre les jsfiddle inutilisables. Pour que ça fonctionne à nouveau, pas de soucis, il suffit d'incorporer au jsfiddle l'url de ces fichiers sur votre propre serveur (ou autre qui les héberge) et ça fonctionnera ;-)