Primefaces dataTable with rowspan

后端 未结 4 862
庸人自扰
庸人自扰 2021-01-04 04:48

I\'m quite new with JSF primefaces 3.1. I try to build a \"complex\" table and I cannot find a good solution using dataTable (I need a sorting component).

I would l

相关标签:
4条回答
  • 2021-01-04 05:28

    since you mentioned primefaces in your tags. I recommend you to use 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>
    
    0 讨论(0)
  • 2021-01-04 05:33

    I would have a look at the RichFaces dataTable. I found it to be more flexible than the PrimeFaces table for complex layouts.

    You can use

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

    so if your line data looks like this:

    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
    

    The the table would show

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

    It is important that if you have buttons/links etc in one of the rowspan columns that you add a rendered="#{rowKey eq 0}" there as well!

    0 讨论(0)
  • 2021-01-04 05:34

    I had the same problem : primefaces (or richfaces) offers rowspan only for header and footer.

    Then I tried to use the icefaces ace:datatable component and it run by adding only one attribute in the colum(s) you want to be "rowspanable" : ace:column : groupBy="#{bean.field}".

    You give as usual a list of rows and this component generates all rowspan automatically (I think by autodetecting neigbourhood of equals values) in the generated html table.

    It runs altogether with primefaces components : at this moment I have primefaces outputlabel in the icefaces datatable cells ant this icefaces datatable is inside a primefaces panel.

    0 讨论(0)
  • 2021-01-04 05:41

    A rock-solid and all flexible solution for custom grids is to use <c:forEach> together with 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>
    

    It looks nice, Command-Buttons and AJAX works in both Head and Cells.

    0 讨论(0)
提交回复
热议问题