Mise en place d'une Grid

Version imprimable

02/06/2009, 11h51
bastien.hug

Mise en place d'une Grid

Bonjours à tous,
Je découvre Dojo et je souhaiterais utiliser la classe Grid.
Mon besoin est donc de créer une Grid avec source de données JSON.
J'ai recherché sur beaucoup de sites et j'ai trouvé tout un tas d'exemples différents mais je n'ai pas réussi en en faire marcher un seul.

Si vous pouviez m'aider à mettre ça en place ca serait super.

Merci d'avance et bonne journée à tous.

salut;

voila un 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
 
//imporer la class
<script >
   dojo.require("dojox.grid.DataGrid");
</script>
//ici tu cree votre store
<span dojoType="dojo.data.ItemFileWriteStore"
	 url="/myData.json"
	jsid="gridStore">
</span>
<table dojoType="dojox.grid.DataGrid"
jsid="grid"
store="gridStore"
 id="grid"
style="width: 80em; height: 50em;"
rowSelector="20px"
clientSort="true"
>
<thead>
		<tr>
			<th field="num" width="150px">Numéro</th>
			<th field="nom" width="150px">Nom</th>
			<th field="prenom" width="150px">Prénom</th>
		</tr>
	</thead>
</table>

n'oublie pas d'importer le style .

02/06/2009, 16h35
bastien.hug

Merci beaucoup pour ton aide.

Il me reste encore une ou deux points à éclaircir :
- De quel style parles-tu ?
- A quoi doit ressembler le myData.json ?

Merci
02/06/2009, 17h12
devkaty
salut,

Pour que tu puisse afficher le grid tu dois affecter à lui un style .
Les styles sont déja developper, il faut juste les importer .
exemple :
Code:

1 2 3 4 5 <style type="text/css"> @import "/dojox/grid/resources/Grid.css"; @import "/dojox/grid/resources/tundraGrid.css"; </style>
Pour url="/myData.json" c'est le chimin de votre fichier qui contient les données sous format JSON .
02/06/2009, 17h55
bastien.hug

merci,

OK pour les styles.
Pour ce fichier JSON le données doivent respecter une certaine structure ?
Par exemple { rows:[...] } ?

Est-il possible de créer également l'entête du tableau (la structure) en JSON ?

Merci d'avance
02/06/2009, 18h35
emmanuel.remy

Un peu de recherche plutôt que d'aller au petit bonheur la chance :calim2:

http://docs.dojocampus.org/dojox/grid
(un peu dépassé) http://www.dojotoolkit.org/book/dojo...velopment/grid

et les tests officiels http://archive.dojotoolkit.org/night...ox/grid/tests/ avec cet exmple de base: http://archive.dojotoolkit.org/night...data_grid.html

ERE
03/06/2009, 09h01
bastien.hug

Merci beaucoup pour ces exemples.
Je me permet quand même d'ajouter que si je me suis permis de venir poster sur ce forum c'est que j'ai fait déjà beaucoup de recherches et que je n'ai rien trouvé.

Je vais essayer tout ca.
03/06/2009, 10h47
bastien.hug

Super j'ai réussis à faire ce que je voulais.
J'ai trouvé la solution sur cette page : http://docs.dojocampus.org/dojox/grid
Encore une petite question.

Est-il possible de faire apparaitre la grid sur différentes pages par exemple par lots de 10.

J'ai vu qu'il existe l'attribut rowsPerPage mais je n'ai pas réussis à le faire fonctionner.

Si vous avez une piste pour moi c'est très volontier.

Merci d'avance
04/06/2009, 00h41
emmanuel.remy

Citation:

Envoyé par bastien.hug

Super j'ai réussis à faire ce que je voulais.
J'ai trouvé la solution sur cette page : http://docs.dojocampus.org/dojox/grid
Encore une petite question.

Est-il possible de faire apparaitre la grid sur différentes pages par exemple par lots de 10.

J'ai vu qu'il existe l'attribut rowsPerPage mais je n'ai pas réussis à le faire fonctionner.

Si vous avez une piste pour moi c'est très volontier.

Merci d'avance

Ce n'est pas prévu par la version standard de la Grid. Néanmoins il existe une possiblité en gérant le store différemment. Plus d'info sur ce post: http://www.dojotoolkit.org/2009/04/0...-paging-tables

ERE
04/06/2009, 09h39
bastien.hug

Très bien, merci je vais voire sur cette page si je trouve quelque chose.
09/06/2009, 12h18
bastien.hug

Il y a en effet des possibilités mais ça devient trop lourd à mettre en place dans mon cas.

Encore une question :
J'ai maintenant ma liste et je voudrais mettre des boutons modifier, visualiser, supprimer...

Comment faire pour récupérer la ligne sélectionnée ?
Peut-on mettre un identifiant sur la ligne ?

merci

Code:

1
2
 
var theSelectedRow = grid.selection.getSelected();

09/06/2009, 22h25
emmanuel.remy
Citation:

Envoyé par bastien.hug

Il y a en effet des possibilités mais ça devient trop lourd à mettre en place dans mon cas.

Encore une question :
J'ai maintenant ma liste et je voudrais mettre des boutons modifier, visualiser, supprimer...

Comment faire pour récupérer la ligne sélectionnée ?
Peut-on mettre un identifiant sur la ligne ?

merci

En complément de devkaty, tu peux aussi gérer la sélection d'une ligne de la grid par les événements onSelected, onDeselected ou onSelectionChanged.
Par exemple:
Code:

1 2 3 4 <script type="dojo/connect" event="onSelected" args="rowIndex"> selectedItem = grid.getItem(rowIndex); </script>
ERE