[dataTable] rowStyleClass ne fonctionne pas

**doons** · 13/07/2015, 08h37

Bonjour,

J'ai un formulaire de modification d'un objet. Dans le formulaire j'ai différents inputText et autres composants.
En plus, j'ai une dataTable editable qui contient des sous-objets, dans laquelle j'ai une colonne qui permet de supprimer un sous-objet.
La suppression effective se faisant lors de la confirmation de modification, j'aimerais mettre en couleur les lignes qui sont à supprimer.

Pour cela, j'ai une colonne qui permet de supprimer une ligne (met la propriété "isDeleted) à true dans le sous-objet et une rowStyleClass qui teste cette valeur :

Code :

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

1
2
3
4
5
6
7
8
9
<p:dataTable id="periodes"
	value="#{saisirEmployeForm.listPeriodes}" 
	var="periode" widgetVar="periodeTable"
	editable="true" editMode="cell"
	emptyMessage="#{msg['AucunePeriodeAAfficher']}" 
	rowKey="#{periode.id}"
	rowStyleClass="#{!periode.deleted ? null : 'rowDeleted'}"	
        style="margin-bottom:10px" >

La feuille de style :

Code :

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

1
2
3
4
 
.rowDeleted {
	background: pink;
}

Le problème est que la ligne ne se met pas en couleur, quelque soit l'ordre du test.

Qqun a-t-il une idée ?
Merci d'avance pour votre aide

**jeffray03** · 13/07/2015, 12h34

salut,
as-tu essayé ceci:

Code :

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

rowStyleClass="#{(!periode.deleted) ? null : 'rowDeleted'}"

Eric

**doons** · 13/07/2015, 13h47

Salut,

ca ne change rien.
Je me demande si ce n'est pas du fait que la table est editable ? En meme temps ça ne change rien si j'enleve l'édition

**jeffray03** · 13/07/2015, 16h03

salut
essaies ceci et donnes nous le resultat:

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
19
20
21
22
23
24
  <h:head>
	<h:outputStylesheet library="css" name="test.css" />
	<style type="text/css">
.colored {
	background-color: #FF0000;
	color: #FFFFFF;
}

.rowDeleted {
	background: pink;
}
</style>
</h:head>
<body>
<p:dataTable id="periodes"
	value="#{saisirEmployeForm.listPeriodes}" 
	var="periode" widgetVar="periodeTable"
	editable="true" editMode="cell"
	emptyMessage="#{msg['AucunePeriodeAAfficher']}" 
	rowKey="#{periode.id}"
	rowStyleClass="#{!(periode.deleted) ? 'colored' : 'rowDeleted'}"	
        style="margin-bottom:10px" >
  >

Eric

**doons** · 14/07/2015, 09h35

Salut,

Les lignes supprimées s'affichent bien en rose

**jeffray03** · 14/07/2015, 09h46

salut ,
donc c´est un probleme de placement du fichier css.
peux-tu nous donner la structure du projet?
Eric

**doons** · 14/07/2015, 10h15

Je ne pense pas ... car sur la même page, les autres éléments ont bien le rendu défini dans les classes de la feuille de style.
Un texte devant être souligné - gras - bleu est bien souligné - gras - bleu.

J'ai essayé d'ajouter !important mais ça ne change rien

**jeffray03** · 14/07/2015, 10h19

salut,
peux-tu nous dire comment as-tu defini la variable :

Code :

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

deleted

?

Eric

**doons** · 14/07/2015, 11h11

Salut,

C'est un boolean que j'ai mis dans le bean. Je le mets à jour lorsque je clique sur le lien de suppression

Code :

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

1
2
3
4
 
public void supprimerPeriode() {
	this.selectedPeriode.setDeleted(true);
}

Code :

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

1
2
3
4
 
<p:commandLink onclick="PF('confDeleteDlg').show()" styleClass="ui-icon ui-icon-action-supprimer" >
     <f:setPropertyActionListener target="#{saisirEmployeForm.selectedPeriode}" value="#{periode}" />
</p:commandLink>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!-- Dialogue de confirmation de suppression d'une période -->
<p:dialog header="#{msg['ConfirmerLaSuppression']}" widgetVar="confDeleteDlg" resizable="false" id="confDelDlg"
          showEffect="fade" hideEffect="fade" >
     <p:outputLabel value="#{msg['EtesVousSurDeVouloirSupprimerCettePeriode']}" />
     <div align="center">
	   <h:panelGrid id="display" columns="2" cellpadding="10">
	         <p:commandButton id="deleteButton" action="#{saisirEmployeForm.supprimerPeriode}" oncomplete="PF('confDeleteDlg').hide()" 
	               update=":saisirEmployeForm:periodes" value="#{msg['Oui']}" />
	         <p:commandButton id="cancelButton" onclick="PF('confDeleteDlg').hide()" value="#{msg['Non']}"/>
	   </h:panelGrid>
     </div>
</p:dialog>

**jeffray03** · 14/07/2015, 11h23

salut,
et quand tu fais un

Code :

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

System.out.println(deleted);

dans le getter de deleted il te donne quelle valeur?

Eric

**doons** · 14/07/2015, 11h54

Si j'ai 3 lignes et que je clique sur la 2ème, il retourne

false
true
false

Si je clique encore sur le 1ère, il retourne

true
true
false

**jeffray03** · 14/07/2015, 12h41

si lors d´un clic tu as 3 lignes, et que sur toute ces lignes, tu as toujours a la fin false, alors c´est que ton resultat est bon.
car tu dis, si :

Code :

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

deleted == false  alors null

Eric

**doons** · 14/07/2015, 13h08

Hé oui, mais ça ne fonctionne pas.
Ca fonctionnait bien avec ton bout de code de feuille de style à intégrer directement dans la page xhtml

Quelle graille

**jeffray03** · 14/07/2015, 13h18

salut,
peux-tu me poster en PN le code ?
Eric

**doons** · 14/07/2015, 15h59

En fait j'ai trouvé une parade:

Plutôt que d'avoir

Code :

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

1
2
3
4
5
 
.rowDeleted {
	background: #FF3030;
	text-decoration: italic;
}

J'ai

Code :

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

1
2
3
4
5
 
.rowDeleted {
	color: #FF3030;
	text-decoration: italic;
}

Et pour la table:

Code :

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

rowStyleClass="#{!(periode.deleted) ? null : 'rowDeleted'}"

Par contre

Code :

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

text-decoration: italic;

ne fonctionne toujours pas, je vais l'enlever.
Tant pis, pour le moment je peux me débrouiller sans

Merci à tous pour votre aide

**jeffray03** · 14/07/2015, 16h40

salut,
pour cela tu mets ceci dans ton css:

Code :

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

1
2
3
4
5
.rowDeleted {
	color: #FF3030;
	font-style: italic !important;
}

Eric

**doons** · 15/07/2015, 06h47

Oui ca marche très bien avec

Code :

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

font-style: italic !important;

Merci beaucoup

[dataTable] rowStyleClass ne fonctionne pas

JSF Java

Discussions similaires

Partager

Partager