Discussion :

[renaud26]

Bonjour à Tous,

J'ai une fonction récursive PHP qui parcourt une table SQL de catégories (id, parent_id, nom) pour afficher une arborescence.

Avec sortable, je voudrais pouvoir déplacer une sous-catégorie d'une catégorie à une autre, ou une catégorie dans une autre, bref, pouvoir réorganiser mon arbre à volonté.

Voici un exemple de l'affichage de l'organisation :

Code :

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
 
<div id="cats">
 
<div class="column left" id="mere_1">
<ul class="sortable-list">
<li id="29" style="color:blue;font-weight:bold" class="sortable-item">Catégorie 1</li>
<li id="276"  class="sortable-item">Sous-Cat 1-1</li>
</ul>
</div>
<div class="column left" id="mere_2">
<ul class="sortable-list">
<li id="39" style="color:blue;font-weight:bold" class="sortable-item">Catégorie 2</li>
<li id="45"  class="sortable-item">Sous-Cat 2-1</li>
<li id="267"  class="sortable-item">Sous-Cat 2-2</li>
</ul>
</div>
<div class="column left" id="mere_3">
<ul class="sortable-list">
<li id="282" style="color:blue;font-weight:bold" class="sortable-item">Catégorie 3</li>
</ul></div>
 
</div>

et la fonction JQuery :

Code :

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
 
    $(document).ready(function () {
 
		$('#cats .sortable-list').sortable({
			connectWith: '#cats .sortable-list',
			placeholder : '.column left',
			update: function(e, ui){
 
				var objet_moved = $(ui.item); // L'élément déplacé
            	                var id_objet = objet_moved.attr('id'); // ID de l'élément déplacé
 
				var id_new = $('.column left').attr('id');
 
				$.ajax ( {
					url : "<?php echo $xhr; ?>",
					type : "post",
					data : "cat_bouge=" + id_objet + "&cat_recoit=" + id_new,
 
					success: function(data){alert(data);}
 
				});
 
			}
		});
 
    });

L'idée globale est que chaque <div> de classe "column left" affiche une catégorie et ses sous catégories, chacune dans un <li> avec son ID. Je voudrais pouvoir déplacer une sous-cat d'une catégorie à l'autre, ou une catégorie mère dans une autre, mais pas une sous-catégorie dans une autre sous-catégorie. Dans mon exemple, le alert me renvoie l'id de la catégorie/sous-cat qui est déplacée, mais le div "receveur" me renvoie undefined au lieu de "mere_1", par exemple.
Comment récupérer les deux à coup sûr et empêcher le déplacement d'une sous-cat dans une autre sous-cat ?
Merci de votre aide.

[renaud26]

Je progresse : je pense avoir récupéré l'ID de la sous-cat ou la cat qui bouge, et vers quelle nouvelle cat.

Code :

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
 
receive: function(e, ui){
 
		var objet_moved = ui.item[0].id; // la cat qui se déplace
 
		var target = this.id; //cat cible
 
		alert(target + "recoit " + objet_moved);
 
		$.ajax ( {
		        url : "<?php echo $xhr; ?>",
			type : "post",
			data : "cat_bouge=" + objet_moved + "&cat_recoit=" + target,// + "&ordre = "+ serial.hash,
			success: function(data){alert(data);}
			//success: function(data){window.location.reload();}
		});
 
},
stop: function(e, ui){
		var columns = [];
 
		columns.push($(this).sortable('toArray').join(','));	
		alert(columns);
                 //ENCORE UN AJAX ???
}

Pour également permettre de modifier l'ordre des sous-catégories au sein d'une cat, j'ai également ajouté une fonction stop où je crée un tableau avec l'ordre nouveau. Le truc, c'est que je suis obligé de refaire un appel ajax pour la MAJ de la BDD...Comment pourrais-je raccourcir tout ça et passer toutes les infos avec un seul ajax ?

[renaud26]

Je fais les questions et les réponses,
Finalement, suffit d'initialiser les variables avant les fonctions et de mettre l'appel ajax sur le stop.

Code :

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
27
28
29
30
31
32
33
34
35
36
 
    $(document).ready(function () {
		// $(function() {
	var objet_moved;
	var columns = [];
	var target;
	var old_cat;
 
		$('#cats .sortable-list').sortable({
			connectWith: '#cats .sortable-list',
			placeholder : '#cats .sortable-list',
 
                        receive: function(e, ui){
				objet_moved = ui.item[0].id; // la cat qui se déplace
				target = this.id; //cat cible
				old_cat = ui.sender[0].id; // cat qui a été quittée et doit être réorganisée
 
				alert(target + " recoit " + objet_moved + " après avoir quitté " + old_cat); 
 
			},
			stop: function(e, ui){
				columns.push($(this).sortable('toArray').join(','));	
				alert(columns);
 
 
				$.ajax ( {
					url : "<?php echo $xhr; ?>",
					type : "post",
					data : "cat_bouge=" + objet_moved + "&cat_recoit=" + target + "&old_cat=" + old_cat + "&column=" + columns,
					//data : "items=" + getItems('#example-2-3'),
					success: function(data){alert(data);}
					//success: function(data){window.location.reload();}
				});
			}
		})
    });