Discussion :

[daucy36]

Bonjour,

J'essaye de faire un tableau dojo, qui au passage de la souris m'ouvre une sorte d'infobulle ou je pourrais rentrer du texte en fonction des mes colonnes.

Ces colonnes doivent afficher une image qui change en fonction des données récupérer= 4 images d’états différents.

Mais je ne vois pas très bien comment m'y prendre.

Voici mon tableau : qui s'affiche.

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
 
<div dojoType="dijit.layout.ContentPane" class="grid" region="left">
	<span dojoType="dojo.data.ItemFileReadStore" jsId="icStore" url="grid.json" ></span>
		<table id="grid1" dojoType="dojox.grid.DataGrid" store="icStore" clientSort="true" style="width: 35em; height: 15em;">
			<thead>
				<tr>
					<th width="15%" field="Name">Name</th>
					<th width="15%" field="Etat">Etat</th>
					<th width="15%" field="Nombretotal">Nombre total</th>
					<th width="40%"
field="description">description</th>
				</tr>
			</thead>
		</table>
</div>

Si quelqu'un aurait quelques pistes à me donner.... pour pouvoir afficher l'infobulle.

Merci beaucoup!

[Daniel_Gibot]

Bonjour,

Je ne vois pas bien ce que vous souhaitez faire.
Vous voulez afficher une info bulle (dijit.tooltip ?) au passage de la souris sur le header ou sur les cellules ?
L'image doit apparaitre dans la cellule ou dans le tooltip ?

Il n'y a pas vraiment de "moyens" pour travailler sur les colonnes comme on pourrait avoir pour les lignes (par exemple onRowClick).

Il y a l'event au passage de la souris sur une cellule mais pas sur une colonne. Par contre vous pouvez récupérer le numéro de colonne via cet event.

Code :

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

1
2
3
4
5
 
dojo.connect(dijit.byId('grid1'),"onCellMouseOver",function(evt){
      //affiche le nom de la colonne
      alert(evt.cell.field);
});

Il y a "onCellMouseOver" mais aussi "MouseIn" et "MouseOut" et il y a "onCellClick".

[daucy36]

En effet c'est bien dans la cellule que je voudrais créer une infobulle.

De nouveau voici mon tableau avec un petit changement :

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
 
<div dojoType="dijit.layout.ContentPane" class="grid" region="left">
	<span dojoType="dojo.data.ItemFileReadStore" jsId="icStore" url="grid.json" ></span>
		<table id="grid1" dojoType="dojox.grid.DataGrid" store="icStore" clientSort="true" style="width: 35em; height: 15em;">
			<thead>
				<tr>
					<th width="15%" field="Name">Name</th>
					<th width="15%" field="state" formatter=renderActionCellContent>State</th>
					<th width="15%" field="Nombretotal">Nombre total</th>
					<th width="40%"
field="description">description</th>
				</tr>
			</thead>
		</table>
</div>

mon script :

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
 
	function renderActionCellContent(value, index){
      var v_grid = dijit.byId('grid1');
      var itm = v_grid.getItem(index);
      var image;
      if(itm.state==1)
    	  image = "<img src='common/images/grid/circle/green.png'/>";
      if(itm.state==2)
    	  image = "<img src='common/images/grid/circle/yellow.png'/>";
      if(itm.state==3)
    	  image = "<img src='common/images/grid/circle/yellow.png'/>";
      if(itm.state==4)
    	  image = "<img src='common/images/grid/circle/red.png'/>";
      return image;
}

et mon fichier json :

Code :

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

1
2
3
4
5
6
7
 
{
	"items":[
		{"Name":"texte1","state":"0","Nombretotal":"1","description":"texte de description1"},
		{"Name":"texte2","state":"0","Nombretotal":"1","description":"texte de description2"}
	]
}

- je voudrais tout d'abord reussir à afficher mes images png dans ce tableau dans la colonne etat.
- et ensuite afficher une infobulle assez grande pour inserer quelques lignes de texte lorsque l'on passe sur l'image avec la souris.

Comment dois je m'y prendre?

[Daniel_Gibot]

Avec la valeur de votre variable "value" vous avez déjà la valeur de la cellule "state". Inutile de rechercher 'itm.state'. Et si vos images ne s'affichent pas c'est parce que la valeur de state est à "0" et que vous ne faites pas de contrôler pour cette valeur là

En ce qui concerne les "Tooltip", je pense que c'est possible d'en afficher au passage de la souris sur la cellule (pas sur l'image qui est dedans) reste à trouver l'id unique de la cellule. Par contre, toute donnée saisie dans dans le "Tooltip" sera perdue étant donné qu'elle ne peut être liée au dataGrid. Mais il peut y avoir un moyen en créant une colonne "invisible" dans le dataGrid qui pourrait contenir les valeurs.

[daucy36]

Oui en effet la valeur était à 0.
Mais maintenant ca fonctionne très bien. merci beaucoup. Je suis en train de debuter avec le javascript et c'est pas encore très logique pour moi.

Pour ce qui concerne le tooltip, je dois créer un id pour chaque cellule?
Est ce que ca se fait dans le json?

Un grand merci ca m'a bien avancé en tout cas!

[Daniel_Gibot]

Il me semble que dojo, à la création du datagrid avec son contenu, défini un id unique à chaque composant (div, span etc...). Le nom doit être uniqueId je pense mais après faut fouiller dans la pile d'objet qu'il y a

Sinon faut arriver à en définir un et ca par contre je ne sais pas comment c'est possible.

Je regarderai d'un peu plus près.