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

Question

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

Answer 1

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

1. Пишите простой HTML самостоятельно. <h:panelGrid> в основном отображает HTML <table>, Делать то же самое.
2. Создайте собственный HTML-рендеринг, который поддерживает это. Однако будет много пота и боли.
3. Используйте стороннюю библиотеку компонентов, которая поддерживает это.
   • Томагавк имеет <t:panelGroup> компонент, который поддерживает colspan в <h:panelGrid>,
   • RichFaces (только 3.x) имеет <rich:column> компонент, который поддерживает как colspan а также rowspan в <rich:dataTable>,
   • PrimeFaces имеет <p:row> рядом с <p:column> который поддерживается в обоих <p:panelGrid> а также <p:dataTable> (также с <p:columnGroup>).

Answer 2

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

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

Answer 3

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

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

Answer 4

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

а) файл ресурса сообщения с двумя записями:
key.row = (игнорировать пробелы)
key.gt =>

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

тогда, например

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

печатает таблицу с 3 строками:

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

2) 3 пустых клетки

3) центр, выровненный по ячейке, имеющий кольспан 3 и содержащий привет

V.

Answer 5

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

Answer 6

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

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

Обратите внимание, что button5 занимает два столбца с учетом требуемого размера.