Discussion :

[bastien.hug]

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.

[devkaty]

salut;

voila un 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
 
//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 .

[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

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

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

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 .

[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

[emmanuel.remy]

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

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

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

[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

[emmanuel.remy]

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

[bastien.hug]

Très bien, merci je vais voire sur cette page si je trouve quelque chose.

[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

[devkaty]

Code :

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

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

[emmanuel.remy]

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 :

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

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

ERE