Primefaces dataTable with rowspan

Jestem dość nowy z podstawowymi funkcjami JSF 3.1. Próbuję zbudować "złożoną" tabelę i nie mogę znaleźć dobrego rozwiązania za pomocą dataTable (potrzebuję komponentu sortującego).Primefaces dataTable with rowspan

Chciałbym zbudować odpowiednik stół do poniższego reprezentacji HTML, wykorzystując podstawowe POJO tak:

String field1 
String field2 
List<String> fields3 // 3 items 
String field4 

<table border="1"> 
<tr> 
    <td rowspan="3">col1</td> 
    <td rowspan="3">col2</td> 
    <td>col3.1</td> 
    <td rowspan="3">col4</td> 
</tr> 
<tr> 
    <td>col3.2</td> 
</tr> 
<tr> 
    <td>col3.3</td> 
</tr>  
</table>

daję może zbyt mało informacji, więc jeśli jest to potrzebne, proszę mi powiedzieć :) Mam nadzieję, że moje pytanie jest jasne.

Dziękuję

Źródło

2012-10-30 Jean-François Houzard

Czy rozpiętość rowków jest naprawdę potrzebna? Nie możesz po prostu wyrenderować 'fields3' w zagnieżdżonej tabeli/liście? – BalusC

Tak, może to być tabela/lista zagnieżdżona. Próbowałem podtabeli, ale nie mogę jej użyć w komórce: s –

Po prostu użyj '' we właściwości 'fields3'. – BalusC

solidnym i wszystko elastyczne rozwiązanie dla niestandardowych siatek jest użycie < c: foreach> razem z Primefaces < p: panelGrid>:

<html ... xmlns:c="http://java.sun.com/jsp/jstl/core" 
      xmlns:p="http://primefaces.org/ui"> 
    <p:panelGrid> 
     <p:row> 
      <p:column styleClass="ui-state-default" colspan="2"><!-- header --> 
       <h:outputText value="Some Header"/> 
      </p:column> 
      ... 
     </p:row> 
     <p:row><!-- other header row --> 
      ... 
     </p:row> 
     <c:forEach items="#{list}" var="element"> 
      <p:row> 
       <p:column styleClass="ui-state-default" rowspan="#{list.sublist.someSizeExpression}"><!-- left rowspan --> 
        <h:outputText value="#{element.name}"/> 
       </p:column> 
       <c:forEach items="#{element.sublist}" var="subelement"> 
        <p:column> 
         <h:selectBooleanCheckbox/> 
        </p:column> 
       </c:forEach> 
      </p:row> 
     </c:forEach> 
    </p:panelGrid> 
</html>

ładnie wygląda, Command przyciski i AJAX działa zarówno Głowa, jak i Komórki.

Źródło

2012-12-25 15:25:08 Tires

Wydaje się dobre :) Dziękuję –

ponieważ wspomniane primefaces w tagach. polecam użyć p:panelGrid

<p:panelGrid> 

    <p:row> 
     <p:column rowspan="3"/> 
     <p:column rowspan="3"/> 
     <p:column rowspan="1"/> 
     <p:column rowspan="3"/> 
    </p:row> 

    <p:row> 
     <p:column/> 
    </p:row> 

    <p:row> 
     <p:column/> 
    </p:row> 

</p:panelGrid>

Źródło

2012-10-30 13:00:27

Tak, ale muszę sortować niektóre kolumny, więc dataTable wydaje się dobrym wyborem. –

miałem ten sam problem: primefaces (lub Richfaces) oferuje rowspan tylko dla nagłówka i stopki.

Potem próbowałem użyć ICEfaces ace:datatable komponent i go uruchomić poprzez dodanie tylko jednego atrybutu w colum (y) chcesz być „rowspanable”: ace:column: groupBy="#{bean.field}".

Dajesz jak zwykle listę wierszy, a ten komponent automatycznie generuje wszystkie wiersze (jak sądzę przez automatyczne wykrywanie wartości równych wartości) w wygenerowanej tabeli html.

Działa całkowicie z komponentami primefaces: w tej chwili mam primefaces outputlabel w lodowatych komórkach datatable, a te lodowe datatable znajdują się wewnątrz panelu primefaces.

Źródło

2012-11-22 16:25:38 jcgarnier

W końcu zaimplementowałem swój własny stół: s –

@ Jean-FrançoisHouzard Dla tych, którzy jak ja, którzy mają tę funkcjonalność, możecie zamieścić swoje rozwiązanie jako anwser? – Stephan

RichFaces obsługuje rowspan! Używamy go w kilku miejscach z podtytułami. Po prostu upewnij się, że używasz render = "# {rowKey eq 0}" rowspan = "# {bean.listSize}". Możesz nawet mieć np. pierwsza kolumna z rozpiętością rzędu 10 i druga kolumna z odstępami rzędu 4 i 6 (tylko i przykład). Będziesz potrzebował innego indeksu dla drugiej kolumny dla renderowania. – Ben

Chciałbym rzucić okiem na RichFaces DataTable. Zauważyłem, że jest bardziej elastyczny niż tabela PrimeFaces dla złożonych układów.

Można użyć

<rich:collapsibleSubTable 
    value="#{bean.getData()}" 
    var="line" 
    id="subTable" 
    rowKeyVar="rowKey" 
    width="100%"> 
<rich:column width="40" rendered="#{rowKey eq 0}" rowspan="#{line.firstColRowSpan}"> 
    #{line.country} 
    </rich:column> 
    <rich:column rendered="#{line.index eq 0}" rowspan="#{line.secondColRowSpan}"> 
     #{line.state} 
    </rich:column> 
    <rich:column> 
    #{line.city} 
    </rich:column> 
</rich:subtable>

więc jeśli dane linia wygląda następująco:

US CA San Francisco 0 (index) 6 (firstColRowSpan) 3 (secondColRowSpan) 
US CA LA 1 6 3 
US CA Jose 2 6 3 
US TX Huston 0 6 2 
US TX Dallas 1 6 2 
US AZ Phoenix 0 6 1 
UK Surrey Guildford 0 1 1

tabela pokaże

US CA  San Francisco 
      LA 
      Jose 
    TX  Huston 
      Dallas 
    AZ  Phoenix 
UK Surrey Guildford

Ważne jest, że jeśli masz przyciski/links etc w jednej z kolumn rowspan, do której dodajesz również renderowany "= {rowKey eq 0}"!

Źródło

2015-06-04 15:41:46 Ben

Primefaces dataTable with rowspan

Odpowiedz

Powiązane problemy