วิธีการตั้งค่า colspan และ rowspan ใน JSF panelGrid

ทั้งสองอย่างเป็นไปไม่ได้ด้วยการนำ JSF มาตรฐานไปใช้ มี 3 วิธีในการแก้ไขปัญหานี้:

1. เขียน HTML ธรรมดาด้วยตัวคุณเอง A <h:panelGrid> โดยทั่วไปจะแสดงผล HTML <table> ทำเหมือนเดิม.
2. สร้างตัวเรนเดอร์ HTML แบบกำหนดเองซึ่งรองรับสิ่งนี้ แต่คงจะเหนื่อยและเจ็บปวดมาก
3. Use a 3rd party component library which supports this.
   • Tomahawk has a <t:panelGroup> component which supports colspan in <h:panelGrid>.
   • RichFaces (3.x เท่านั้น) มี <rich:column> คอมโพเนนต์ที่รองรับทั้ง colspan และ rowspan ใน <rich:dataTable>
   • PrimeFaces มี <p:row> ถัดจาก <p:column> ซึ่งรองรับทั้งใน <p:panelGrid> และ <p:dataTable> (รวมถึง <p:columnGroup> ด้วย)

ตั้งแต่วันที่ 24 มกราคม 2555 Primefaces ยังมีความเป็นไปได้ที่จะใช้ colspan และ rowspan ในส่วนประกอบ panelGrid ของ Primefaces ดู:

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

ใช้: rich:column colspan="2" จาก RichFaces

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

สมมติ

1. #P2#

   #P3#

2. แถว.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>
   

   ตัวอย่างเช่น

   <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>
   

พิมพ์ตารางที่มี 3 แถว:

1. r1-c1, r1-c2 , r1-c3

2. 3 เซลล์ว่าง

3. เซลล์ที่จัดกึ่งกลางโดยมี colspan 3 และมี hello div

ฉันเห็นด้วยกับคำตอบของ BalusC และต้องการเพิ่มว่าไลบรารีคอมโพเนนต์ Primefaces JSF2 ยังมีฟังก์ชันนี้หากคุณใช้ p:dataTable มันถูกเรียกว่าการรวมกลุ่มที่นั่น

ไม่มีวิธีใดที่จะกำหนดช่วงคอลัมน์ในตารางแผงได้ แต่หากใช้อย่างชาญฉลาด คุณสามารถทำให้มันเกิดขึ้นได้ด้วยแท็กธรรมดาเท่านั้น ตัวอย่างหนึ่งที่ฉันอยากจะแสดงให้คุณเห็น

<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>

Please note that button5 spans two columns given the size it requires.