Comment laisser une ligne fixe dans un tableau triable ?

**Koma** · 17/03/2009, 17h00

Bonjour,

Voila, j'ai un tableau Dojo, qui est donc triable, mon problème est le suivant : la dernière ligne de mon tableau est une ligne de totaux, je voudrais donc que cette dernière ligne ne soit pas trié et reste en dernière position.
Comment puis-je faire cela ?
je vous remercie par avance.

**emmanuel.remy** · 18/03/2009, 01h39

Salut,

J'ai passé en revue le code de la DataGrid, et autant les headers ont un rendu spécifique, autant il n'est jamais fait allusion au moindre footer

.

Une solution pourrait être de construire "astucieusement" les données (pour pouvoir repérer celles qui concernent les totaux) et ensuite de définir des tris personnalisés qui tiennent compte du format des données.

Pour le tri personnalisé, tu peux lire cette discussion http://www.developpez.net/forums/d70...-fonction-tri/

Sinon, voilà un exemple complet que je viens de finir et qui peut te servir de base de travail. L'idée est d'afficher des prix avec leur total

J'ai mis les commentaires dans 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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>grid</title>
 
	<style type="text/css">
  	/* les styles nécessaires pour le type d'affichage souhaite */ 
 	 @import "dojox/grid/_grid/nihiloGrid.css";
 	 @import "dojox/grid/resources/Grid.css";
 	 @import "dojo/resources/dojo.css";
	</style>
 
     <script type="text/javascript" src="dojo/dojo.js"
	        djConfig="parseOnLoad: true"></script>
 
	<script type="text/javascript">
	  	dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
 
      //ex d'un store avec des prix
      var datas= { identifier: 'id',
                  	label: 'id',
                  	items: [
                  		{ id: '0', prix: 12 },
                  		{ id: '1', prix: 17 },
                  		{ id: '2', prix: 22 },
                  		{ id: '3', prix: 18 },
                  		/* ici le total en dernière ligne...
                  		   on triche un peu en changeant l'affichage 
                         des données... mais c'est une démo ! */
                      { id: '-4-', prix: '-69-' } 		
                  		]};
 
      //on crée le store
      store = new dojo.data.ItemFileReadStore({data: datas});
 
      //on va écrire pour chaque colonne une fonction de comparaison
      //spécifique qui s'arrange pour que le tri garde les totaux en
      //bas de tableau
      //on utilise grid.sortInfo qui est une propriété de l'objet DataGrid
      //telle que grid.sortInfo = (l'index de la colonne triée base 1) * (1 si ASC et -1 si DESC)
      //ex: tri DESC sur col 2 -> grid.sortInfo=-2 
 
      store.comparatorMap = {};
 
      //le comparator spécifique s'appuie sur la petite tricherie du format appliqué aux totaux
      //La fin justifie les moyens, c'est l'idée qui compte ! 
      //si a ou b n'est pas un nombre c'est que c'est un total (vu notre format)
      //et on renvoie donc une valeur + ou - en fonction du type de tri ASC ou DESC
     //en s'appuyant sur grid.sortInfo
      store.comparatorMap["prix"] = function(a, b){
           if (isNaN(a)) { 
            return grid.sortInfo;
           } else if (isNaN(b)) { 
            return -grid.sortInfo;
           } else {
            return a-b;
           }
      }
 
      //on copie la focntion pour les ids
      store.comparatorMap["id"] = store.comparatorMap["prix"] ;
 
  	</script>
 
	</head>
		<body>		
 
	<table dojoType="dojox.grid.DataGrid"
		jsid="grid" id="grid" 
		store="store" query="{ id: '*' }" rowsPerPage="20" rowSelector="20px">
		<thead>
			<tr>
 
				<th field="id" width="300px">ID</th>
				<th field="prix" width="auto">Prix</th>
			</tr>
		</thead>
	</table>
 
		</body>
	</html>

Tu peux tester par un copier-coller, c'est fonctionnel... reste à le mettre à ta sauce.

ERE

**Koma** · 18/03/2009, 15h51

Je comprend le principe de ton code, je tente de le bidouiller pour mon besoin, j'ai toutefois une question, dans le bloc

Code :

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

1
2
3
4
5
6
7
8
9
store.comparatorMap["prix"] = function(a, b){
           if (isNaN(a)) { 
            return grid.sortInfo;
           } else if (isNaN(b)) { 
            return -grid.sortInfo;
           } else {
            return a-b;
           }
      }

A quoi correspondent exactement a et b que nous passons à la fonction ?

Envoyé par emmanuel.remy

Salut,

J'ai passé en revue le code de la DataGrid, et autant les headers ont un rendu spécifique, autant il n'est jamais fait allusion au moindre footer

.

Une solution pourrait être de construire "astucieusement" les données (pour pouvoir repérer celles qui concernent les totaux) et ensuite de définir des tris personnalisés qui tiennent compte du format des données.

Pour le tri personnalisé, tu peux lire cette discussion http://www.developpez.net/forums/d70...-fonction-tri/

Sinon, voilà un exemple complet que je viens de finir et qui peut te servir de base de travail. L'idée est d'afficher des prix avec leur total

J'ai mis les commentaires dans 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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>grid</title>
 
	<style type="text/css">
  	/* les styles nécessaires pour le type d'affichage souhaite */ 
 	 @import "dojox/grid/_grid/nihiloGrid.css";
 	 @import "dojox/grid/resources/Grid.css";
 	 @import "dojo/resources/dojo.css";
	</style>
 
     <script type="text/javascript" src="dojo/dojo.js"
	        djConfig="parseOnLoad: true"></script>
 
	<script type="text/javascript">
	  	dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
 
      //ex d'un store avec des prix
      var datas= { identifier: 'id',
                  	label: 'id',
                  	items: [
                  		{ id: '0', prix: 12 },
                  		{ id: '1', prix: 17 },
                  		{ id: '2', prix: 22 },
                  		{ id: '3', prix: 18 },
                  		/* ici le total en dernière ligne...
                  		   on triche un peu en changeant l'affichage 
                         des données... mais c'est une démo ! */
                      { id: '-4-', prix: '-69-' } 		
                  		]};
 
      //on crée le store
      store = new dojo.data.ItemFileReadStore({data: datas});
 
      //on va écrire pour chaque colonne une fonction de comparaison
      //spécifique qui s'arrange pour que le tri garde les totaux en
      //bas de tableau
      //on utilise grid.sortInfo qui est une propriété de l'objet DataGrid
      //telle que grid.sortInfo = (l'index de la colonne triée base 1) * (1 si ASC et -1 si DESC)
      //ex: tri DESC sur col 2 -> grid.sortInfo=-2 
 
      store.comparatorMap = {};
 
      //le comparator spécifique s'appuie sur la petite tricherie du format appliqué aux totaux
      //La fin justifie les moyens, c'est l'idée qui compte ! 
      //si a ou b n'est pas un nombre c'est que c'est un total (vu notre format)
      //et on renvoie donc une valeur + ou - en fonction du type de tri ASC ou DESC
     //en s'appuyant sur grid.sortInfo
      store.comparatorMap["prix"] = function(a, b){
           if (isNaN(a)) { 
            return grid.sortInfo;
           } else if (isNaN(b)) { 
            return -grid.sortInfo;
           } else {
            return a-b;
           }
      }
 
      //on copie la focntion pour les ids
      store.comparatorMap["id"] = store.comparatorMap["prix"] ;
 
  	</script>
 
	</head>
		<body>		
 
	<table dojoType="dojox.grid.DataGrid"
		jsid="grid" id="grid" 
		store="store" query="{ id: '*' }" rowsPerPage="20" rowSelector="20px">
		<thead>
			<tr>
 
				<th field="id" width="300px">ID</th>
				<th field="prix" width="auto">Prix</th>
			</tr>
		</thead>
	</table>
 
		</body>
	</html>