【PrimeFaces】DataTable 兩種寫法 - Part1：寫法

tags: PrimeFaces

Common 目的

該討論只針對前端.xhtml寫法的部分

方法1：標題列 header 和內容 value 寫在同一個 column

<p:dataTable var="car" value="#{dtBasicView.cars}">
    <p:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </p:column>
 
    <p:column headerText="Year">
        <h:outputText value="#{car.year}" />
    </p:column>
 
    <p:column headerText="Brand">
        <h:outputText value="#{car.brand}" />
    </p:column>
 
    <p:column headerText="Color">
        <h:outputText value="#{car.color}" />
    </p:column>
</p:dataTable>

方法2：標題列 header 和內容 value 寫在不同 column

<p:dataTable var="car" value="#{dtBasicView.cars}">

    <p:columnGroup type="header">
        <p:row>
            <p:column headerText="Id"/>
            <p:column headerText="Year"/>
            <p:column headerText="Brand"/>
            <p:column headerText="Color"/>
        </p:row>
    </p:columnGroup>

    <p:column>
        <h:outputText value="#{car.id}" />
    </p:column> 
    <p:column>
        <h:outputText value="#{car.year}" />
    </p:column> 
    <p:column>
        <h:outputText value="#{car.brand}" />
    </p:column>
    <p:column>    
        <h:outputText value="#{car.color}" />
    </p:column>
</p:dataTable>

Reference 參考資料

1. DataTable 官方範例1：https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml
2. DataTable 官方範例2：https://www.primefaces.org/showcase/ui/data/datatable/subTable.xhtml

Part2：應用範例

連結：【PrimeFaces】DataTable 兩種寫法 - Part2：應用範例