Discussion :

[Fafhrd]

Bonjour,

J'ai créé un datatable où je récupère la ligne sélectionnée. Cependant, sans le surlignage de la ligne lors du passage de la souris, ce n'est pas très joli visuellement.

Quelqu'un aurait-il la solution pour permettre cela ?
Si je pouvais aussi avoir l'apparence de la souris de changée en une main lors du passage sur une ligne ça serait sympa.

Merci,
Fafhrd

[Sniper37]

Change le style CSS..

[amariasoft]

essaye de mettre ta coloumn entre la balise span

Code :

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

1
2
 
<span style="cursor:pointer" >X</span>

[Fafhrd]

Code :

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

1
2
3
4
5
6
7
8
9
 
<span style="cursor:pointer" >
       <rich:column style="width:40%;" id="carnetAdressesNom">
             <f:facet name="header">
                   <h:outputText value="Nom et prénom" />
             </f:facet>
             <h:outputText value="#{contactItem.nom}" />
       </rich:column>
</span>

Ne fonctionne pas... je n'ai rien qui pointe sur la colonne lorsque mon curseur passe dessus.

Je ne vois pas non plus comment je peux faire du css lorsque la souris passe sur la cellule.

Cependant, j'ai découvert qu'avec <a4j:support event="onRowMouseOver" /> je pouvais effectuer une action lorsque je passe sur la ligne avec ma souris... reste à voir si je peux l'exploiter pour changer la css :s.

[Sniper37]

tu as mieux en utilisant jQuery:

Code :

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

1
2
3
4
5
 
<rich:jQuery selector="#table tr"
query="mouseover(function(){jQuery(this).addClass('active-row')})" />
<rich:jQuery selector="#table tr"
query="mouseout(function(){jQuery(this).removeClass('active-row')})" />

[Fafhrd]

Ca a l'air interressant.

J'ai défini ma classe CSS

Code :

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

1
2
3
4
.active-row {
    background: #FF5544;
    cursor: pointer;
}

J'ai ajouté ces 2 instructions dans mon <rich:dataTable>

Code :

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

1
2
3
4
<rich:jQuery selector="#table tr"
     query="mouseover(function(){jQuery(this).addClass('active-row')})" />
<rich:jQuery selector="#table tr"
     query="mouseout(function(){jQuery(this).removeClass('active-row')})" />

Mais je n'ai aucune réaction quand je passe la souris sur ma ligne... Est-ce que j'ai fais une erreur ? (j'ai quelques lacunes en css, c'est peut-être à cause de ça)

[Sniper37]

#table correspond à l'id donnée à la dataTable.

[Fafhrd]

Code :

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

1
2
3
<rich:dataTable value="#{selectionnerContactBean.dataModel}" var="contactItem"
      width="100%" columnClasses=",columns,columns,columns" rows="20"
      id="table" rowKeyVar="row">

Pourtant si... id="table". Ou alors il y a une subtilité qui manque et qu'il faut ajouter ?

[Fafhrd]

Ok j'ai trouvé. En fait, les instructions <rich:jQuery> doivent être définies après l'élément et pas dans l'élément.
Donc je les ai appellé juste après avoir cloturé la balise de mon <rich:dataTable> et ça a marché niquel.

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
<rich:dataTable value="#{selectionnerContactBean.dataModel}" var="contactItem"
          width="100%" columnClasses=",columns,columns,columns" rows="20"
          id="table" rowKeyVar="row">
     <rich:column style="width:40%;" id="carnetAdressesNom">
            <f:facet name="header">
                    <h:outputText value="Nom et prénom" />
             </f:facet>
            <h:outputText value="#{contactItem.nom}" />
      </rich:column>
      <f:facet name="footer">
            <rich:datascroller ajaxSingle="false"/>
      </f:facet>
</rich:dataTable>
<rich:jQuery selector="#table tr"
       query="mouseover(function(){jQuery(this).addClass('active-row')})" />
<rich:jQuery selector="#table tr"
       query="mouseout(function(){jQuery(this).removeClass('active-row')})" />

Cependant, il me reste un dernier soucis : Les lignes surlignées prennent en compte le header et le footer...
Existe-t-il un moyen pour ne pas prendre en compte ces 2 lignes là ?

[Fafhrd]

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
 
<rich:dataTable value="#{selectionnerContactBean.dataModel}" var="contactItem"
          width="100%" columnClasses=",columns,columns,columns" rows="20"
          id="table" rowKeyVar="row" rowClasses="base-row">
     <rich:column style="width:40%;" id="carnetAdressesNom">
            <f:facet name="header">
                    <h:outputText value="Nom et prénom" />
             </f:facet>
            <h:outputText value="#{contactItem.nom}" />
      </rich:column>
      <f:facet name="footer">
            <rich:datascroller ajaxSingle="false"/>
      </f:facet>
</rich:dataTable>
<rich:jQuery selector="#table tr.base-row"
       query="mouseover(function(){jQuery(this).addClass('active-row')})" />
<rich:jQuery selector="#table tr.base-row"
       query="mouseout(function(){jQuery(this).removeClass('active-row')})" />

Hé voila j'ai trouvé la solution. La technique c'est de mettre une class de base pour les lignes et de se limiter à ces classes dans le jQuery.

Code :

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

1
2
3
4
5
6
7
8
9
 
.active-row {
    background: #FF5544;
    cursor: pointer;
}
 
.base-row {
 
}

[Sniper37]

et si il y'a deux styles pour les lignes:

Code :

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

selector="#table tr.paire-row,#table tr.impaire-row"