web-dev-qa-db-fra.com

Comment définir colspan et rowspan dans JSF panelGrid?

Comment définir colspan et rowspan dans JSF <h:panelGrid>?

jsfhtml-tablepanelgrid
58
Hari kanna

Aucune des deux n'est possible avec l'implémentation standard JSF. Il y a 3 façons de résoudre ce problème:

  1. Écrivez vous-même du code HTML. Un <h:panelGrid> rend fondamentalement un HTML <table>. Faire de même.
  2. Créez un rendu HTML personnalisé prenant en charge cette fonctionnalité. Ce sera cependant beaucoup de sueur et de douleur.
  3. Utilisez une bibliothèque de composants tiers prenant en charge cette .
56
BalusC

Depuis le 24 janvier 2012, Primefaces a également la possibilité d’utiliser colspan et rowspan dans le composant panelGrid de Primefaces. Voir:

http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml

8
Renso Lohuis

Utilisation: riche: colonne colspan="2" de RichFaces 

<rich:column colspan="2">                        
<h:outputText  value="Ingrese el texto de la imagen" /> 
</rich:column>
2
dmotta

assumer 

a) un fichier de ressources de message avec deux entrées: 
key.row =</ td> </ tr> <tr> <td (ignorer les espaces)
key.gt =>

b) row.xhtml

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://Java.Sun.com/jsf/facelets"
    xmlns:h="http://Java.Sun.com/jsf/html"
    xmlns:f="http://Java.Sun.com/jsf/core"
    xmlns:c="http://Java.Sun.com/jsp/jstl/core" >

    <c:forEach begin="0" end="#{colspan-2}">
        <h:panelGroup />
    </c:forEach>

    <h:panelGroup>
      <h:outputText value="#{i18n['key.row']}" escape="false" />
      <h:outputText value=" colspan='#{colspan}' #{cellAttributes}" />
      <h:outputText value="#{i18n['key.gt']}" escape="false" />

      <ui:insert />
    </h:panelGroup>

</ui:composition>

alors, par exemple

<h:panelGrid columns="3">
  <h:outputText value="r1-c1" />
  <h:outputText value="r1-c2" />
  <h:outputText value="r1-c3" />

  <ui:decorate template="/row.xhtml">
    <ui:param name="colspan" value="3" />
    <ui:param name="cellAttributes" value=" align='center'" />

    <div>Hello!!!!!</div>
  </ui:decorate> 
</h:panelGroup>


imprime un tableau avec 3 lignes: 

1) r1-c1, r1-c2, r1-c3

2) 3 cellules vides

3) un centre aligné sur la cellule, ayant le colspan 3 et contenant un bonjour div ..

V.

2
V. Petropoulos

Je suis d’accord avec la réponse de BalusC et souhaite ajouter que la bibliothèque de composants Primefaces JSF2 offre également cette fonctionnalité si vous utilisez le composant p: dataTable . C'est ce qu'on appelle grouper là.

1
alfonx

Il n’existe aucun moyen de définir l’étendue des colonnes dans la grille du panneau, mais si vous l’utilisez avec sagesse, vous pouvez y arriver uniquement avec une simple balise. Un exemple que je voudrais vous montrer.

<h:panelGrid columns="1" >
<h:panelGrid columns="2">
    <h:commandButton image="resources/images/Regular5.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=REGULAR">
    </h:commandButton>
    <h:commandButton id="button2" image="resources/images/Casual2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=CASUAL">
    </h:commandButton>
</h:panelGrid>
<h:panelGrid columns="2">
    <h:commandButton id="button3" image="resources/images/Instant2.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=INSTANT">
    </h:commandButton>
    <h:commandButton id="button4" image="resources/images/Outstation6.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION">
    </h:commandButton> 
</h:panelGrid>
<h:commandButton id="button5" image="resources/images/ShareMyCar.jpg" action="booking/Create.jsf?faces-redirect=truebookingType=OUTSTATION">
</h:commandButton>

Veuillez noter que button5 s'étend sur deux colonnes en fonction de la taille requise.

0
Manish Kumar Thakur