UI Sortable, tri d'une table

Version imprimable

Voilà mon chef ma trouvé un nouveau défi. Alors que j'avais terminé mon projet.

Faire un tableau triable sur lequel on gardera les positions des cellules en Base.
Pour cela j'utilise JqueryUI.

Je suis arrivé à faire mes lignes déplaçable, a gérer l'evenement lorsque l'on pose la ligne à sa nouvelle place.
Mais je n'arrive pas trouver de solution pour récupérer la nouvelle position de cette ligne par rapport au tableau.

Voici un code d'exemple :

Code:

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title> Table Sortable</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
	<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script> 
	<script type="text/javascript">
	$(function() {
		$("#subsortsortable tbody.content").sortable({
		stop: function(event, ui) { 
			console.log('Posee'); 
		}
	});
		$("#subsortsortable tbody.content").disableSelection();
	});
	</script> 
  </head>
  <body>
<table id=subsortsortable border="1" > 
<tbody class=content>
<tr><th>Origine</th><th> Position Reelle </th></tr>
<tr><td>Position 1</td><td> 1 </td></tr>
<tr><td>Position 2</td><td> 2 </td></tr>
<tr><td>Position 3</td><td> 3 </td></tr>
<tr><td>Position 4</td><td> 4 </td></tr>
<tr><td>Position 5</td><td> 5 </td></tr>
</tbody>
</table>
  </body>
</html>

Essaye ceci :

Code:

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
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title> Table Sortable</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
	<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script> 
	<script type="text/javascript">
	$(function() {
		$("#subsortsortable tbody.content").sortable({
			stop: function(event, ui) { 
				//console.log('Posee'); 
			},
			update: function(event, ui){
				var order = $('#subsortsortable tbody.content').sortable('toArray');
				alert(order);
			}
		});
		$("#subsortsortable tbody.content").disableSelection();
	});
	</script> 
  </head>
  <body>
<table id=subsortsortable border="1" > 
<tbody class=content>
<tr id="pos1"><td>Position 1</td><td> 1 </td></tr>
<tr id="pos2"><td>Position 2</td><td> 2 </td></tr>
<tr id="pos3"><td>Position 3</td><td> 3 </td></tr>
<tr id="pos4"><td>Position 4</td><td> 4 </td></tr>
<tr id="pos5"><td>Position 5</td><td> 5 </td></tr>
</tbody>
</table>
  </body>
</html>

10/11/2010, 15h18
llaffont

Merci ça marche. :ccool:
Mais bon ça me semble devenir merdique pour mettre à jour les positions en base. :lol:

J'arrive pas à mettre la main sur un exemple de tableau sortable ou l'on puisse faire glisser une ligne de ligne en ligne.

PS : Une bonne nuit de sommeil et un environnement calme sont des éléments essentiels à la réalisation d'un projet informatique. J'ai pas de chance j'ai aucun des 2 aujourd'hui

EDIT : J'ai trouvé bonheur

Bon j'ai trouvé bonheur ! Mais car il y-a un mais

Voilà le code

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title> Table Sortable</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
	<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script> 
	<script type="text/javascript">
	$(function() {		
		$("#subsortsortable tbody.content").sortable({
			placeholder: 'highlight', // classe à ajouter à l'élément fantome
			update: function(){// callback quand l'ordre de la liste est changé
				var NewOrder = $('#subsortsortable tbody.content').sortable('serialize');// récupération des données à envoyer
				console.log(NewOrder);
				alert(NewOrder);
				//$.post('ajax.php',NewOrder); // appel ajax au fichier ajax.php avec l'ordre des photos
 
			}
		});		
		$("#subsortsortable tbody.content").disableSelection();
	});
 
	</script> 
	<STYLE type="text/css">
	table{
	background:#f2f2f2;
	border:1px dashed #212326;
	}
	</STYLE>
 
  </head>
  <body>
<table id=subsortsortable border="1" > 
 
<tbody>
<tr><th>pos</th><th>posf</th></tr>
</tbody >
<tbody class=content>
<tr id="pos_1"><td>Position 1</td><td> 1 </td></tr>
<tr id="pos_2"><td>Position 2</td><td> 2 </td></tr>
<tr id="pos_3"><td>Position 3</td><td> 3 </td></tr>
<tr id="pos_4"><td>Position 4</td><td> 4 </td></tr>
<tr id="pos_5"><td>Position 5</td><td> 5 </td></tr>
</tbody>
</table>
  </body>
</html>

Quelqu'un peut me dire pourquoi la variable NewOrder ne prends que les valeurs numérique ?

En effet j'ai la sortie suivante

Citation:

pos[]=1&pos[]=3&pos[]=2&pos[]=4&pos[]=5

25/11/2010, 08h29
llaffont

Je me permet de relancer car je rencontre toujours le problème.

Ce n'est pas vraiment gênant mais la première et dernière position sont mal interprété.

Bonsoir

Je ne vois pas le problème (mais attention le th doit être dans le thead) :

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.6.custom.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
<table id=subsortsortable border="1" >
	<thead>
		<tr id="tr_O">
			<th>Origine</th>
			<th> Position Reelle</th>
		</tr>
	</thead>
	<tbody class=content>
		<tr id="tr_1">
			<td>Position 1</td>
			<td> 1 </td>
		</tr>
		<tr id="tr_2">
			<td>Position 2</td>
			<td> 2 </td>
		</tr>
		<tr id="tr_3">
			<td>Position 3</td>
			<td> 3 </td>
		</tr>
		<tr id="tr_4">
			<td>Position 4</td>
			<td> 4 </td>
		</tr>
		<tr id="tr_5">
			<td>Position 5</td>
			<td> 5 </td>
		</tr>
	</tbody>
</table>
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.6.custom.min.js"></script>
	<script>
		$(function(){
			$("#subsortsortable tbody.content").sortable({
				update: function(event, ui){
					// order est un array
					var order = $(this).sortable("toArray");
 
					console.log("order = " + order + ", order.length = " + order.length + ", order[2] = " + order[2]);
 
					// str est un texte
					// texte_nombre : format obligatoire
					var str = $(this).sortable("serialize");
 
					console.log("str = ", str);
 
					/*
					 * Après avoir déplacé la deuxième ligne en dernière position
					 *
					 * order = tr_1,tr_3,tr_4,tr_5,tr_2, order.length = 5, order[2] = tr_4
					 *
					 * str = tr[]=1&tr[]=3&tr[]=4&tr[]=5&tr[]=2
					 */
				}
			});
 
			$("#subsortsortable tbody.content").disableSelection();
		});
	</script>
</body>  
</html>

27/11/2010, 23h11
llaffont
J'ai trouvé la raison de la mauvaise interprétation j'avais dans ma requete AJAX mis :

Code:

'Ajax.php?orderneTable&Order='+NewOrder

alors qu'il me fallait mettre

Code:

'Ajax.php?orderneTable'+NewOrder

Et merci pour la réponse à Ma première question :
Code:

1 2 var order = $(this).sortable("toArray");
on obtient :

Code:

order = tr_1,tr_3,tr_4,tr_5,tr_2

Alors que quand on fait un

Code:

var order = $(this).sortable("serialize");

On obtient :

Code:

order = tr[]=1&tr[]=3&tr[]=4&tr[]=5&tr[]=2

qui est du à texte_nombre : format obligatoire