Как установить colspan и rowspan в JSF panelGrid?

Как установить colspan и rowspan в JSF <h:panelGrid>?


person Hari kanna    schedule 24.06.2010    source источник


Ответы (6)


Ни то, ни другое невозможно при стандартной реализации JSF. Есть 3 способа это исправить:

  1. Напишите простой HTML самостоятельно. <h:panelGrid> в основном отображает HTML <table>. Делать то же самое.
  2. Создайте собственный модуль визуализации HTML, который поддерживает это. Однако это будет много пота и боли.
  3. Use a 3rd party component library which supports this.
person BalusC    schedule 24.06.2010
comment
Вы пробовали rich:column в сетке панелей с colspan? Потому что в документе говорится: Атрибуты colspan, rowspan и breakbefore влияют только на столбцы в ‹rich:dataTable›, а не на столбцы в ‹rich:extendedDataTable›. - person Luca Molteni; 13.10.2010

С 24 января 2012 года Primefaces также имеет возможность использовать colspan и rowspan в компоненте panelGrid Primefaces. Видеть:

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

person Renso Lohuis    schedule 13.02.2012

Использование: rich:column colspan="2" в RichFaces

<rich:column colspan="2">                        
<h:outputText  value="Ingrese el texto de la imagen" /> 
</rich:column>  
person dmotta    schedule 15.06.2011
comment
этот вопрос касается JSF, а не Richfaces - person specializt; 19.01.2016

Предполагать

  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.

person V. Petropoulos    schedule 10.05.2011
comment
Не так, как я бы поступил. Несмотря на то, что это может ответить на вопрос, пожалуйста, также попытайтесь обучить. Плохая практика... ну... плохая. :) - person Damien Overeem; 22.11.2012

Я согласен с ответом BalusC и хочу добавить, что библиотека компонентов Primefaces JSF2 также предлагает эту функциональность, если вы используете ее p:dataTable компонент. Там это называется группировка.

person alfonx    schedule 20.09.2010

Невозможно определить диапазон столбцов в сетке панели, но при разумном использовании вы можете сделать это только с помощью простого тега. Один пример я хотел бы показать вам.

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

person Manish Kumar Thakur    schedule 15.10.2013