Question

如何将高度数据表装入容器？我希望datable在layoutUnit容器的100％和垂直滚动行，而不是标题。使用此代码，表适合，但垂直滚动所有表（行和标题）。

<html 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:p="http://primefaces.org/ui"
    xmlns:of="http://omnifaces.org/functions">
<h:head>
</h:head>
<h:body>
    <p:layout id="fullPage" fullPage="true" widgetVar="mainLayout">
        <p:layoutUnit position="north" size="300" closable="false"
            collapsible="true" gutter="0"
            style="padding: 0px; border:0px;border-bottom: 1px solid #EF7C00;border-radius: 0px;">
        </p:layoutUnit>
        <p:layoutUnit position="center" gutter="0"
            style="padding: 5px; border:0px;border-radius: 0px;background: #e9eaed;min-width:900px;"
            id="centerID">
            <p:layout id="layoutCorpoId" style="padding: 0px; border:0px;"
                widgetVar="layoutCorpo">
                <p:layoutUnit id="layoutCorpoWest" position="west" gutter="5"
                    resizable="true" size="30%" collapsible="true" closable="false"
                    styleClass="layoutCorpoWest panelBox">
                    <h:form id="validateFormId">
                        <p:dataTable var="elementVal" value="#{testController.players}"
                            id="dataTableId" rowKey="#{elementVal.playerId}"
                            rowIndexVar="idx" scrollable="true" resizableColumns="true" scrollHeight="100%">
                            <p:column headerText="Name">
                                <h:outputText value="#{elementVal.playerName}" />
                            </p:column>
                            <p:column headerText="Position">
                                <h:outputText value="#{elementVal.playerPosition}" />
                            </p:column>
                            <p:column headerText="Age">
                                <h:outputText value="#{elementVal.playerAge}" />
                            </p:column>
                        </p:dataTable>
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit id="layoutCorpoCenter" position="center" gutter="0"
                    collapsible="true" styleClass="layoutCorpoCenter panelBox">
                </p:layoutUnit>
            </p:layout>
        </p:layoutUnit>
        <p:layoutUnit gutter="0" id="bottom" position="south" size="300"
            collapsible="true" styleClass="">
        </p:layoutUnit>
    </p:layout>
</h:body>
</html>

我添加一个代表这个的immage：

滚动后

：

pf 5.3

Answer 1

您可以使用stickyHeader p:dataTable属性来实现此目的。请参阅showcase示例：

<p:dataTable var="car" value="#{dtStickyView.cars}" stickyHeader="true">
...
</p:dataTable>

primefaces数据表垂直滚动

1 个答案: