Affichage d'un tableau

**ghost55** · 09/03/2009, 01h53

Salut,
apres avoir lu les tuto et essayé , j'arrive toujours pas à afficher un tableau avec dojo
Voici ce que j'ai fait et ca m'affiche une page blanche

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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">
  	@import "/dojo/dojox/grid/_grid/Grid.css";
 	 @import "/dojo/dojox/grid/_grid/nihiloGrid.css";
	</style>
 
	<script type="text/javascript">
 
  	dojo.require("dojox.grid.Grid");
	</script>
	<script type="text/javascript" src="/dojo/dojox/grid/tests/support/test_data.js"></script>
	<script type="text/javascript">
 
    	var view1 = {
   	   cells: [
   	     {name: 'Column 0'}, {name: 'Column 1'}, {name: 'Column 2'}, {name: 'Column 3', width: "150px"}, {name: 'Column 4'}
      ]
    };
 
    var layout = [ view1 ];
</script>
	</head>
		<body>		
		<div id="grid1" dojoType="dojox.Grid" model="model" structure="layout"></div>					
		</body>
	</html>

**emmanuel.remy** · 09/03/2009, 13h24

Salut,

La fatigue aidant tu as oublié quasiment la moitié du code...

Pêle-mêle:

Il manque des CSS
Tu ne charges pas dojo.js (!)
Tu utilises la Grid obsolète (il faut utiliser dojox.grid.DataGrid, mais peut-être est ce volontaire si tu es lié à une version précise ?)
Tu ne dimensionnes pas la grille

Je te propose cette solution, mais je t'encourage à regarder ici le code de cet exemple Dojo qui simplifie maintenant grandement la création de le structure de la grille (le layout) en implantant quasi exclusivement du code HTML.

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
 
<!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/Grid.css";
 	 @import "dojox/grid/_grid/nihiloGrid.css";
 	 @import "dojox/grid/resources/Grid.css";
 	 @import "dojo/resources/dojo.css";
	</style>
     <!-- on charge DOJO ... -->
     <script type="text/javascript" src="dojo/dojo.js"
	        djConfig="parseOnLoad: true"></script>
 
	<script type="text/javascript">
                // la nouvelle grille; remplace dojox.grid.Grid
	  	dojo.require("dojox.grid.DataGrid");
	  	//besoin d'un ItemFileWriteStore car test_data.js en utilise un
                dojo.require("dojo.data.ItemFileWriteStore");
	</script>
 
	<script type="text/javascript" src="dojox/grid/tests/support/test_data.js"></script>
	<script type="text/javascript">
	   	        //le layout avec les paires libelle/colonne
			var layout = [
				{name: 'Column 1', field: 'col1'},
				{name: 'Column 2', field: 'col2'},
				{name: 'Column 3', field: 'col3'},
				{name: 'Column 4', field: 'col4', width: "150px"},
				{name: 'Column 5', field: 'col5'}
			];
	</script>
	</head>
		<body>		
 
                <!-- ... enfin la grille  -->
		<div style="height:500px"  id="grid" 
			dojoType="dojox.grid.DataGrid" 
			store="test_store" query="{ id: '*' }" 
			structure="layout" 
			rowSelector="20px">
		</div>
		</body>
	</html>

Désolé mais je n'ai pas actuellement le temps d'en faire plus.

ERE

**emmanuel.remy** · 10/03/2009, 01h22

Ci-dessous le même code avec la nouvelle DataGrid, dont le layout peut être inscrit au format HTML.

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
 
<!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>
     <!-- on charge DOJO ... -->
     <script type="text/javascript" src="dojo/dojo.js"
	        djConfig="parseOnLoad: true"></script>
 
	<script type="text/javascript">
                // la nouvelle grille; remplace dojox.grid.Grid
	  	dojo.require("dojox.grid.DataGrid");
	  	//besoin d'un ItemFileWriteStore car test_data.js en utilise un
                dojo.require("dojo.data.ItemFileWriteStore");
	</script>
 
	<script type="text/javascript" src="dojox/grid/tests/support/test_data.js"></script>
</head>
<body>		
 
	<table dojoType="dojox.grid.DataGrid"
		jsid="grid" id="grid" 
		store="test_store" query="{ id: '*' }" rowsPerPage="20" rowSelector="20px">
		<thead>
			<tr>
 
				<th field="col1" width="300px">Colonne 1</th>
				<th field="col2" width="auto">Colonne 2</th>
				<th field="col3" width="auto">Colonne 3</th>
				<th field="col4" width="auto">Colonne 4</th>
			</tr>
		</thead>
	</table>
 
</body>
</html>

Note que tu peux utiliser dojo.data.ItemFileWriteStore ou dojo.data.ItemFileReadStore, le premier offrant la possibilité de mettre à jour le jeu de données en éditant le contenu de la grille.

ERE

**ghost55** · 15/03/2009, 01h30

merci

Affichage d'un tableau [Dojo]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager