Repartir sur des bonnes bases
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:
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
Code avec la nouvelle Grid
Ci-dessous le même code avec la nouvelle DataGrid, dont le layout peut être inscrit au format HTML.
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
|
<!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
