[PrimeFaces] Coloration des lignes de DataTable

**Psycho185** · 24/04/2012, 09h28

Bonjour,
je voudrais colorier une DataTable de Primefaces avec plus de deux couleur et je ne vois pas comment faire.L'exemple suivant inspiré par :
http://www.primefaces.org/showcase/u...leColoring.jsf :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="../../templates/consoles-admin/template.xhtml">
	<ui:define name="pagecontent">
		<p:panel>
			<h:form id="form">
 
 
 
				<p:dataTable id="table" var="car" value="#{tableBean.carsSmall}"
					rowStyleClass="#{car.year le 1980 ? 'highlightTableRowGray' : 'highlightTableRowGreen'}">
					<p:column>
						<f:facet name="header">  
                    Model  
            </f:facet>
						<h:outputText value="#{car.model}" />
					</p:column>
 
					<p:column>
						<f:facet name="header">  
                    Year  
            </f:facet>
						<h:outputText value="#{car.year}" />
					</p:column>
 
					<p:column>
						<f:facet name="header">  
                    Manufacturer  
            </f:facet>
						<h:outputText value="#{car.manufacturer}" />
					</p:column>
 
					<p:column>
						<f:facet name="header">  
                    Color  
            </f:facet>
						<h:outputText value="#{car.color}" />
					</p:column>
				</p:dataTable>
 
			</h:form>
		</p:panel>
	</ui:define>
</ui:composition>
</html>

Avec le CSS suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.highlightTableRowGreen {
   background-color: green !important;
      font-weight: bold;
}
 
.highlightTableRowRed {
   background-color: red !important;
      font-weight: bold;
}
 
.highlightTableRowGray {
   background-color: gray !important;
      font-weight: bold;
}

Marche très bien.Ce que je voudrais faire c'est attribuer une couleur différente selon un critère qui peut avoir 3 valeurs distinctes.

**fxrobin** · 24/04/2012, 10h27

Salut,

une solution est que ce soit codé par une méthode d'un ManagedBean, par exemple en scope application :

Code :

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

1
2
 
rowStyleClass="#{colorSelectorBean.computeColor(car.year)}"

et ton MB :

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
 
@ManagedBean
@ApplicationScoped
public class ColorSelectorBean 
{
   public String computeColor(int year) 
   {
      if (year < 1980) 
      {
        return "highlightTableRowGray";
      } 
      else if (year < 1990)
      {
        return "highlightTableRowRed";
      }
      else 
      {
         return "highlightTableRowGreen";
      }
   } 
}

**Psycho185** · 24/04/2012, 14h00

Sa marche nickel.
Merci fxrobin

**fxrobin** · 24/04/2012, 14h18

ravi d'avoir pu aider

**neness7** · 27/07/2012, 09h50

Bonjour,

Je suis débutante, et je voudrais aussi colorer des lignes d'une dataTable. J'ai fait une fonction dans un bean , ça va bien à l'intérieur et entre dans les if mais la couleur ne s'affiche pas.
J'ai pris quelques lignes du fichier css décrit au-dessus. Je pense qu'il me manque un lien entre mon ficher css (peut-être incomplet) et mon fichier xhtml.
Quelqu'un peut-il m'aider?

Merci d'avance à tous

**jeffray03** · 31/07/2012, 09h06

salut ou as tu mis ton css? plus simple peux-tu envoyer le code qui ne marche pas?

**neness7** · 01/08/2012, 10h29

Mon css est dans WebContent/themes/styles.css

Ma méthode:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
public String couleurLigne(int niveau){
		System.out.println("entre dans couleurDataTable");
		if (niveau==0){
			System.out.println("entre dans if");
			return "highlightTableRowGray";
		}else{
			System.out.println("entre dans else");
 
			return null;
		}
	}

Merci d'avance

**jeffray03** · 01/08/2012, 14h35

dans ton fichier .xhtml tu dois mettre entre les balises

Code :

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

1
2
3
4
 
<head>
  <link rel = "stylesheet" href="./themes/styles.css" type="text/css" />
</head>

**neness7** · 01/08/2012, 14h44

Merci pour la réponse , enfin de compte j'avais cette ligne mais avec un S à la place d'un s dans stylesheet.

Par contre le gras reste mais la couleur apparait qu'une seconde quand on charge

**jeffray03** · 01/08/2012, 14h53

peux-tu envoyer ton fichier .xhtml?

**neness7** · 01/08/2012, 14h55

Voici le moment où j'appelle la fonction

Code :

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

1
2
3
4
<p:dataTable var="articles" id="dataTable"
				value="#{duplicationDevisBean.mesArticlesDevis}"
				style="width:1035px;" editable="true"
				rowStyleClass="#{couleurDataTableBean.couleurLigne(articles.niveau)}">

[PrimeFaces] Coloration des lignes de DataTable

JSF Java

Discussions similaires

Partager

Partager