UI Sortable, tri d'une table

**llaffont** · 10/11/2010, 12h03

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 :

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
 
<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>

**scourjean** · 10/11/2010, 12h27

Essaye ceci :

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
<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>

**llaffont** · 10/11/2010, 15h18

Merci ça marche.

Mais bon ça me semble devenir merdique pour mettre à jour les positions en base.

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

**llaffont** · 19/11/2010, 12h11

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

Voilà le code

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
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

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

**llaffont** · 25/11/2010, 08h29

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é.

**danielhagnoul** · 27/11/2010, 22h46

Bonsoir

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

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
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>

**llaffont** · 27/11/2010, 23h11

J'ai trouvé la raison de la mauvaise interprétation j'avais dans ma requete AJAX mis :

Code :

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

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

alors qu'il me fallait mettre

Code :

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

'Ajax.php?orderneTable'+NewOrder

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

Code :

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

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

on obtient :

Code :

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

order = tr_1,tr_3,tr_4,tr_5,tr_2

Alors que quand on fait un

Code :

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

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

On obtient :

Code :

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

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

qui est du à texte_nombre : format obligatoire

UI Sortable, tri d'une table

jQuery

Discussions similaires

Partager

Partager