IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Tableau grid avec evenement infobulles


Sujet :

Bibliothèques & Frameworks

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Femme Profil pro
    Inscrit en
    Août 2011
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Août 2011
    Messages : 10
    Par défaut Tableau grid avec evenement infobulles
    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!

  2. #2
    Membre chevronné
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Janvier 2010
    Messages
    322
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2010
    Messages : 322
    Par défaut
    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".

  3. #3
    Membre du Club
    Femme Profil pro
    Inscrit en
    Août 2011
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Août 2011
    Messages : 10
    Par défaut
    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?

  4. #4
    Membre chevronné
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Janvier 2010
    Messages
    322
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2010
    Messages : 322
    Par défaut
    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.

  5. #5
    Membre du Club
    Femme Profil pro
    Inscrit en
    Août 2011
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : Août 2011
    Messages : 10
    Par défaut
    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!

  6. #6
    Membre chevronné
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Janvier 2010
    Messages
    322
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2010
    Messages : 322
    Par défaut
    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.

Discussions similaires

  1. MS Flex Grid et evenement MouseMove: info bulle avec photo
    Par jadey dans le forum VB 6 et antérieur
    Réponses: 31
    Dernier message: 03/08/2006, 08h17
  2. [Tableaux] Trier un tableau comme avec ORDER BY DESC
    Par Anduriel dans le forum Langage
    Réponses: 28
    Dernier message: 08/12/2005, 18h50
  3. [Tableau]Problèmes avec copie de tableau
    Par Itachi-san dans le forum Collection et Stream
    Réponses: 13
    Dernier message: 25/11/2005, 17h23
  4. probleme avec evenements mouseover et mouseout - propriété
    Par polluxArgo dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 21/09/2005, 18h31
  5. [VB6] recuperer des valeurs ds un tableau html avec vb!!
    Par leo13 dans le forum VB 6 et antérieur
    Réponses: 3
    Dernier message: 11/12/2004, 13h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo