如何设计具有垂直和水平标题的primefaces数据表

Question

我想使用具有水平和垂直标题的primeface设计数据。

这样的事情：

有可能吗？

Answer 1

是的，您可以使用冻结列功能来实现此目的。这意味着您还需要使用垂直标题文本值填充第一列。

<p:dataTable var="car" value="#{dtScrollView.cars5}" scrollable="true" scrollHeight="150" scrollWidth="300" frozenColumns="1">
    <p:column headerText="Id" footerText="Id">
        <h:outputText value="#{car.id}" />
    </p:column>
    <p:column headerText="Year" footerText="Year">
        <h:outputText value="#{car.year}" />
    </p:column>
    <p:column headerText="Brand" footerText="Brand">
        <h:outputText value="#{car.brand}" />
    </p:column>
    <p:column headerText="Color" footerText="Color">
        <h:outputText value="#{car.color}" />
    </p:column>
</p:dataTable>

在此示例中，ID列已冻结，可用作垂直标题。请记住，为此，您需要将scrollable属性设置为true，并且需要为scrollWidth设置值。

除此之外，还有另一个小挑战：垂直标题列还需要一个水平标题，否则行不会排成一行。如果您不希望添加此类标题，则可以使用CSS将高度设置为冻结列标题类：

th.ui-frozen-column {
     height: 8px !important;
}

根据您的需要调整高度值。

如果您的其他列具有扩展的高度（使用图像之后或类似的东西），您可能还需要使用一些CSS。冻结的行不会自动扩展其高度，因此您必须手动执行此操作。

检查Primefaces网站，了解有关冻结列和行的更多信息：https://www.primefaces.org/showcase/ui/data/datatable/scroll.xhtml