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)