Discussion :

[JeReMsS69]

Bonjour,

J'aimerai utiliser un style différents pour les headers de mes différentes colonnes. J'ai sais qu'il est possible de mettre un style différent pour chaque colonne, pour chaque ligne, mais est-il possible de le faire pour le header? car je suis bien embeté pour intégrer JSF dans mon design !

Code avec 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
50
<h:dataTable styleClass="datagrid" value="#{listUsers.datas}" var="user" headerClass="first active sortAsc" columnClasses="first col0 center,col1,col2,col3,col4,col5 center,last center col6" border="1" cellspacing="0" cellpadding="0">	
<h:column>
<f:facet name="header"><h:outputText styleClass="hidden" value="Status" />
</f:facet>
<h:graphicImage rendered="#{user.status == 00}" value="../css/img/icon_notification_error.gif" title="Locked"/>
<h:graphicImage rendered="#{user.status == 10}" value="../css/img/icon_notification_info.gif" title="Customer manager"/>
<h:graphicImage rendered="#{user.status == 20}" value="../css/img/icon_notification_info.gif" title="Reporter"/>
<h:graphicImage rendered="#{user.status == 30}" value="../css/img/icon_notification_info.gif" title="Administrator"/>
</h:column>	
<h:column>
<f:facet name="header">
<h:commandLink value="Login" action="#" />
</f:facet>
<h:outputText value="#{user.login}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Name" action="#" />
</f:facet>
<h:outputText value="#{user.name}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Firstname" action="#" />
</f:facet>
<h:outputText value="#{user.firstName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Email" action="#" />
</f:facet>
<h:outputText value="#{user.email}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText styleClass="hidden" value="Detail" />
</f:facet>
<h:commandLink action="#{userBean.view}" title="Informations" actionListener="#{userBean.selectionneElement}">
<h:graphicImage value="../css/img/icon_search.gif"/>
</h:commandLink>
</h:column>	
<h:column>
<f:facet name="header">
<h:outputText  styleClass="hidden" value="Edit" />
</f:facet>
<h:commandLink action="#{userBean.alter}" title="Update" actionListener="#{userBean.selectionneElement}">
<h:graphicImage value="../css/img/icon_edit.gif"/>
</h:commandLink>
</h:column>
</h:dataTable>

Et voici le code HTML sur lequel j'aimerai plus ou moin arriver:

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
<table class="datagrid" border="1" summary="Select people from this list" cellspacing="0" cellpadding="0">
<colgroup>
<col class="col0" />
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
</colgroup>
<thead>
<tr>
<th id="col0" scope="col" class="first"><span class="hidden">Status</span>&nbsp;</th>
<th id="col1" scope="col" class="active sortAsc" ><ahref="#">Login</a></th>
<th id="col2" scope="col" class="sortAsc"><a href="#">Name</a></th>
<th id="col3" scope="col" class="sortAsc"><a href="#">Firstname</a></th>
<th id="col5" scope="col" class="sortAsc"><a href="#">Email</a></th>
<th id="col6" scope="col"><span class="hidden">Information</span>&nbsp;</th>
<th id="col7" scope="col"><span class="hidden">Edit</span>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<th id="row1" scope="row" class="center"><img src="../css/img/icon_notification_info.gif" alt="" title="Administrator"/></th>
<td headers="col1 row1" class="">jem</td>
<td headers="col2 row1" class="">Jeremy</td>
<td headers="col3 row1" class="">xxx</td>
<td headers="col4 row1" class="">xx@test.be</td>
<td headers="col5 row1" class="center"><a href="screenUserView.html"><img src="../css/img/icon_search.gif" alt="info" /></a></td>
<td headers="col6 row1" class="center last"><a href="screenUsersAdd.html"><img src="../css/img/icon_edit.gif" alt="edit" /></a></td>
</tr>
<tr class="error">
<th id="row1" scope="row" class="center"><img src="../css/img/icon_notification_error.gif" alt="" title="Locked"/></th>
<td headers="col1 row2" class="">test</td>
<td headers="col2 row2" class="">Test</td>
<td headers="col3 row2" class="">Test</td>
<td headers="col4 row2" class="">test@test.be</td>
<td headers="col5 row2" class="center"><a href="screenUserView.html"><img src="../css/img/icon_search.gif" alt="info" /></a></td>
<td headers="col6 row2" class="center last"><a href="screenUsersAdd.html"><img src="../css/img/icon_edit.gif" alt="edit" /></a></td>
</tr>
<tr>
<th id="row1" scope="row" class="center"><img src="../css/img/icon_notification_info.gif" alt="" title="Reporter"/></th><td headers="col1 row3" class="">hihi</td>
<td headers="col2 row3" class="">Erik</td>
<td headers="col3 row3" class="">HIHI</td>
<td headers="col4 row3" class="">hihi@test.be</td>
<td headers="col5 row3" class="center"><a href="screenUserView.html"><img src="../css/img/icon_search.gif" alt="info" /></a></td>
<td headers="col6 row3" class="center last"><a href="screenUsersAdd.html"><img src="../css/img/icon_edit.gif" alt="edit" /></a></td>
</tr>
</tbody>
</table>

Merci

[Sniper37]

tu veux dire, un style de header différent pour chaque colonne?

[JeReMsS69]

Oui c'est bien ca

[Sniper37]

tu le faire en ajouter la style à chaque header de colonnes. à ma connaissance il n'ya pas de propriété de headerColumnsClasses.

[JeReMsS69]

Quand je rajoute dans la balise

Code :

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

<f:facet name="header">

j'ai une erreur car elle ne peut pas contenir d'attribut autre que name!

Et le rajouter sur l'output ce n'est pas ce que je veux car ca doit s'appliquer a la cellule!

[Sniper37]

utilise:

Code :

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

1
2
3
<h:column  headerClass="classe">
 
</h:column>