[RichFaces] Surlignage d'une ligne d'un datatable

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

Change le style CSS..

essaye de mettre ta coloumn entre la balise span

Code:

---

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

---

Code:

---

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.

tu as mieux en utilisant jQuery:

Code:

---

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')})" />

---

Ca a l'air interressant.

J'ai défini ma classe CSS

Code:

---

1 2 3 4

.active-row { background: #FF5544; cursor: pointer; }

---

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

Code:

---

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)

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

Code:

---

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 ?

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:

---

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à ?

Code:

---

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:

---

1 2 3 4 5 6 7 8 9

.active-row { background: #FF5544; cursor: pointer; }   .base-row {   }

---

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

Code:

---

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

---