Comment faire en sorte que les en-têtes datables couvrent un certain nombre de colonnes

Question

J'ai un simple datable JSF, qui a actuellement quatre colonnes, une ligne d'en-tête et (avec les données actuelles) trois lignes de données.

Je dois ajouter trois colonnes supplémentaires; cette partie est facile.
Je souhaite également ajouter une autre ligne d'en-tête avant la ligne d'en-tête existante avec des en-têtes couvrant un sous-ensemble de colonnes.

Le résultat souhaité est quelque chose comme:
Colonne 1: première ligne vide; en-tête sur la deuxième rangée.
Colonnes 2 à 4: l'en-tête de la première rangée couvre 3 colonnes; la deuxième rangée a des en-têtes de colonne individuels.
Colonnes 5-7: l'en-tête de première rangée couvre 3 colonnes; la deuxième rangée a des en-têtes de colonne individuels.

Est-ce possible? Si oui, comment puis-je le faire?

Voici des images montrant ce à quoi il devrait ressembler.

1. Ceci est la table de données avant d'avoir changé quoi que ce soit.
   Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample1.gif

2. Ceci est la table de données après avoir ajouté trois colonnes. J'étais capable de le faire facilement.
   Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample2.gif

3. Ceci montre le résultat final souhaité, que je ne peux pas comprendre. Notez les en-têtes "Ventes au détail" et "Ventes de flotte/Gov" qui couvrent chacune trois colonnes.
   Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample3.gif

Answer 1

Vous ne pouvez pas le faire avec <h:dataTable>. Eh bien, vous pouvez avec quelques hacks laids, comme modifier le DOM avec javascript et en ajoutant les colonnes souhaitées, mais ce n'est pas ce que vous devriez faire.

Jetez un oeil à RichFaces dataTable - ses colonnes prennent en charge l'attribut colspan.

Answer 2

Cela serait facile si vous utilisiez Richfaces (comme Mention Bozho) avec l'attribut breakBefore.

Voici un exemple rapide:

<rich:dataTable value="#{countryCodeListFactory}" var="c"> 
    <f:facet name="header"> 
     <rich:columnGroup> 
      <rich:column colspan="2">Main</rich:column> 
      <rich:column colspan="4">Other Details</rich:column> 
      <rich:column breakBefore="true">Country ID</rich:column> 
      <rich:column>Name</rich:column> 
      <rich:column>Region</rich:column> 
      <rich:column>Alpha</rich:column> 
      <rich:column>ISO</rich:column> 
      <rich:column>Flag Path</rich:column> 
     </rich:columnGroup> 
    </f:facet> 
    <rich:column>#{c.countryId}</rich:column> 
    <rich:column>#{c.countryName}</rich:column> 
    <rich:column>#{c.region}</rich:column> 
    <rich:column>#{c.alpha3}</rich:column> 
    <rich:column>#{c.isoNum}</rich:column> 
    <rich:column>#{c.flagImage}</rich:column> 
</rich:dataTable> 

Si vous n'êtes pas alors vous êtes à l'aide, espérons-facelets. Ensuite, vous pouvez construire la table manuellement en utilisant le <ui:repeat>

<table> 
    <tr> 
     <th colspan="2">Main</th> 
     <th colspan="4">Details</th> 
    </tr> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Region</th> 
     <th>Alpha</th> 
     <th>ISO</th> 
     <th>Flag</th> 
    </tr> 
    <ui:repeat value="#{countryCodeListFactory}" var="c"> 
    <tr> 
     <td>#{c.countryId}</td> 
     <td>#{c.countryName}</td> 
     <td>#{c.region}</td> 
     <td>#{c.alpha3}</td> 
     <td>#{c.isoNum}</td> 
     <td>#{c.flagImage}</td> 
    </tr> 
    </ui:repeat> 
</table>