Besoin de votre aide pour un tableau avec un sortable [résolu]

Question

nickleus

10 May 2009 à 10:02

Bonjour,

J'ai créer un tableau ou je peux déplacer les lignes avec JQuery. (mon Drad n drop fonctionne correctement)

L'idée est de pouvoir déplacer les lignes en changeant le chiffre d'un champ texte qui se trouve sur la même ligne. (Dans le cas présent le champ texte est est order)

exemple :

Si la ligne (A) déplacé à un champ texte qui à pour valeur 1, et que je la déplace pour la mettre à la place de la ligne 2 (B), et bien je souhaiterais que le champs texte de la ligne (B) ait pour valeur 1 et l'autre ligne (A) ait pour valeur 2.

Je me suis bien fait comprendre ? Smiley sweatdrop

voila le tableau de mon code HTML:


  <table width="100%" border="0" cellspacing="0" cellpadding="0" id="admin-list">
    <thead>
      <tr>
        <th width="1%">&nbsp;</th>
        <th width="2%">#</th>
        <th width="2%"><input id="all" name="all" type="checkbox" value="1" /></th>
        <th><a href="#">Nom</a></th>
        <th width="5%">Order</th>
        <th width="5%">Activer</th>
        <th width="2%">ID</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="6">Pagination</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td class="drag">&nbsp;</td>
        <td align="center">1</td>
        <td class="d" align="center"><input id="id1" name="all" type="checkbox" value="1" /></td>
        <td><a href="#">Item 1</a></td>
        <td align="center"><input class="order" name="order" value="1" size="2" /></td>
        <td align="center"><a href="#" title="Unpublish"><img src="../../images/icones/unpublish-24-24.png" width="16" height="16" alt="unpublish" /></a></td>
        <td align="center">1</td>
      </tr>
      <tr>
        <td class="drag">&nbsp;</td>
        <td align="center">2</td>
        <td align="center"><input id="id2" name="all" type="checkbox" value="3" /></td>
        <td><a href="#">Item 2</a></td>
        <td align="center"><input class="order" name="order" value="2" size="2" /></td>
        <td align="center"><img src="../../images/icones/publish-24-24.png" width="16" height="16" alt="publish" /></td>
        <td align="center">3</td>
      </tr>
   </tbody>
  </table>

Bon j'ai essayé de raccourci le code au maximum.

Ensuite le code JS de JQuery :


$("tbody").sortable({
    accept:"tr",
    revert: true,
    forcePlaceholderSize: true,
    placeholder: "placeholder",
    opacity: 0.8,
    handle: ".drag",
});

Est-ce que vous seriez comment procéder ? Ou connaissez-vous un bon tuto sur ce sujet ?
(S'il vous plait en Français le tuto, car je ne comprend pas tout en JS alors s'il faut je j'essaye de le traduire ... Smiley fou

)

Merci d'avance de vos conseils
Modifié par nickleus (10 May 2009 - 10:03)

Heyoan

10 May 2009 à 13:37

Salut,

ton titre parle de drag n drop mais en fait il s'agit de sortable non ?

Pour ce qui est de ta question je ne connais pas de tuto mais voilà comment j'utilise le sortable : en cas de mise à jour effective de l'ordre de tri (évènement update) j'appelle un script PHP via Ajax qui met à jour une table mysql. Le principe est d'affecter à chaque élément "triable" (dans ton cas les éléments TR) un id sous la forme monid_123 où 123 est un incrément (dans mon cas il s'agit d'un véritable identifiant numérique unique). De cette façon un array est disponible dans le script sous la forme $_POST['monid'] trié par id. En l'adaptant à ta question ça pourrait donner quelque chose comme :

page.php

$("tbody").sortable({
    accept:"tr",
    revert: true,
    forcePlaceholderSize: true,
    placeholder: "placeholder",
    opacity: 0.8,
    handle: ".drag",
    update: function(e, ui){
	serial = $(this).sortable("serialize");	
	$.ajax({
	url: "sort.php",
		type: "POST",
		data: serial,
		success: function(feedback){
			$("#tri").val(feedback);
		}
	});
    }			
});

...

<tr id="monid_1>
...
<tr id="monid_2>
...
<tr id="monid_3>
...
<input type="hidden" value="1;2;3" name="tri" id="tri" />

sort.php

<?php
if(!empty($_POST['monid'])) {
	$order = '';
	$prefix = '';
	foreach($_POST['monid'] as $position => $id_tr) {
		$order .= $prefix.$id_tr;
		$prefix = ';';
	}
	echo $order;
}
?>

Il ne te reste plus qu'à récupérer $_POST['tri'] et à appliquer un explode dessus.

Je précise que je ne suis pas un foudre de guerre en jQuery et qu'il y a peut-être (sûrement ? Smiley lol

) plus simple à faire !
Modifié par Heyoan (10 May 2009 - 13:54)

nickleus

10 May 2009 à 13:58

Ta solution est super intéressent ! Merci. Tu viens de m'enlever la prochaine épine du pieds que je risquais d'avoir.

Mais en plus de faire une mise à jour dans ma db, je souhaite mettre en même temps à jour je champ input suivant :

<input class="order" name="order" value="X" size="2" />

Pour que la personne qui utilise ce tableau connaisse immédiatement l'ordre ou éventuellement pouvoir le modifier à la main si JS n'est pas activé.

Et c'est cette petite mise à jour que je n'arrive pas a faire (je début avec JQuery). Donc si tu a une idée je reste ouvert.

Encore merci

PS: Et oui c'est sortable Smiley confused

Modifié par nickleus (10 May 2009 - 13:59)

Heyoan

10 May 2009 à 14:03

nickleus a écrit :
Mais en plus de faire une mise à jour dans ma db

Ben puisque tu utilises un formulaire ça ne me semble pas une bonne idée de faire la mise à jour de la table en direct (si j'ai bien compris) : autant le faire une fois que le formulaire est soumis car que se passe-t-il s'il ne l'est pas ?

nickleus a écrit :
je souhaite mettre en même temps à jour je champ input suivant...

Ben il suffit de remplacer le champ que j'ai mis en hidden par un champ de saisie.

Au passage tu utilises l'attribut align qui est obsolète et devrait être remplacé par du code css. Smiley cligne

nickleus

10 May 2009 à 14:18

Voila un pitit capture de mon écran.

En faite les champs sont sur chaque ligne. Le problème que je rencontre c'est de faire comprendre à JS qu'il faut faire un +1 ou un -1 sur les champs que je déplace. Je ne souhaite pas tous mettre dans dans un seul balise input.

Est ce que tu vois ce que je veux dire.

PS:
Au passage tu utilises l'attribut align qui est obsolète et devrait être remplacé par du code css.

Merci je ne savais pas

Heyoan

10 May 2009 à 15:09

Ah OK...

Du coup j'aurais affecté un id à chaque INPUT order (le même que celui du TR qui le contient) :

html


$("tbody").sortable({
	accept:"tr",
	revert: true,
	forcePlaceholderSize: true,
	placeholder: "placeholder",
	opacity: 0.8,
	handle: ".drag",
	update: function(){
		serial = $(this).sortable("serialize");	
		var pattern = new RegExp("[0-9]+","g");
		var serial = serial.match(pattern);
		for (x in serial)
		{
			document.getElementById('order_'+serial[x]).value = parseInt(x)+1;
		}
	}			
});

...

<tbody>
    <tr id="monid_1">
      ...
         <input class="order" name="order" id="order_1" value="1" size="2" />
    </tr>
    <tr id="monid_2">
      ...
         <input class="order" name="order" id="order_2" value="2" size="2" />
    </tr>
    <tr id="monid_3">
      ...
         <input class="order" name="order" id="order_3" value="3" size="2" />
    </tr>

Et encore une fois il y a peut-être bien plus simple...
Modifié par Heyoan (10 May 2009 - 15:11)

nickleus

10 May 2009 à 15:21

Oui je pense que comme cela c'est pas ma du tout mais encore un "pitit" question (sans vouloir abuser).

Lorsque je fait un alert de : var value = $("tbody").sortable("serialize");

Pourquoi ça ne m'affache que :

order[]=1&order[]=2&order[]=3

alors que j'ai 4 lignes ?

Heyoan

10 May 2009 à 15:29

Je dirais qu'il y a une faute de frappe... surtout qu'avec mon exemple ça devrait être
monid[]=1&monid[]=2&monid[]=3&monid[]=4

nickleus

10 May 2009 à 15:42

honte sur môa, Je pouvais chercher !!!

Comme un bleu de base, j'ai laissé "change" au lieu de "update" Smiley mur

.

Si ça se trouve j'avais la solution avant. Mais bon, la tienne est bien plus simple que ce à quoi j'avais pensé.

Encore merci.

PS: On fait comment pour dire que ce post est résolu ?
Modifié par nickleus (10 May 2009 - 19:17)

Heyoan

10 May 2009 à 15:44

Il faut éditer ton premier post, ce qui permet de rajouter un [résolu] dans le titre.

nickleus

10 May 2009 à 19:19

Coucou me re-voila !

Au lieu de rouvrir un autre post, je continue ici. J'ai un petit bug sur IE (j'ai la version 7).

Est ce que JQuery est compatible IE ?

nickleus

10 May 2009 à 19:38

Bon je m'auto-réponds:

j'ai remplacé ça


for ( x in serial )
{
document.getElementById ( "order_" + serial[x] ) .value = parseInt(x)+1;
}

par ça


for ( i=1, n = serial.length; i<n; i++ )
{
document.getElementById ( "order_" + serial[i] ) .value = parseInt(i)+1;
}

Merci pour votre aide encore[/i]
Modifié par nickleus (10 May 2009 - 19:55)

Heyoan

10 May 2009 à 19:46

nickleus a écrit :
Est ce que JQuery est compatible IE ?

Oui... mais je pense que ça vient de ma boucle for. Tu pourrais essayer

for (x=0 ; x < serial.length; x++)
{
	document.getElementById('order_' + serial[x]).value = x + 1;
}

Edit: ah ben le temps que je regarde tu avais déjà trouvé. Smiley langue

Modifié par Heyoan (10 May 2009 - 19:48)

nickleus

10 May 2009 à 20:00

Oui mon code était pas très bon
Modifié par nickleus (10 May 2009 - 20:00)

gilles66

28 Oct 2009 à 02:48

Je précise que je ne suis pas un foudre de guerre en jQuery et qu'il y a peut-être (sûrement ? Smiley lol

) plus simple à faire !

T'es peut-être pas un foudre en jquery, n'empêche que je l'utilise beaucoup depuis cette année, et là tu viens de m'apprendre quelque chose de très intéressant.... Smiley biggrin

Modifié par gilles66 (28 Oct 2009 - 02:49)

Sujet clos