如何在 p:datatable 中显示垂直和水平标题？答案

【问题标题】：How to display vertical and horizontal headers in p:datatable?如何在 p:datatable 中显示垂直和水平标题？
【发布时间】：2013-04-11 04:57:36
【问题描述】：

我正在尝试使用 JSF 2.1.7 和 Primefaces 3.3.1 显示一个同时具有垂直和水平标题的表格。

这基本上是我想做的：

<table>
    <thead>
        <tr>
            <th></th>
            <th>Hor 1</th>
            <th>Hor 2</th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            <th>vert 1</th>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <th>vert 2</th>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </tbody>
</table>

这是我取得的最好成绩：

<p:dataTable value="#{ctrl.values}" var="val">
    <p:column styleClass="ui-state-default">
        <h:outputText value="Vertical header" />
    </p:column>
    <p:column headerText="Horizontal header">
        <h:outputText value="#{val.anything}"/>
    </p:column>
</p:dataTable>

ui 类将我的单元格设置为标题，这对我来说已经足够了（没有行选择或过滤）。但是我还有一个问题：在这个例子中应该替换“垂直标题”的标题文本来自通过 EL 访问的资源包。如何定义每行显示哪些值？

有人能指出我正确的方向吗？谢谢。

【问题讨论】：

标签： jsf jsf-2 primefaces datatable

【解决方案1】：

在 JSF 中，有一种“标准”方式可以将页眉（和页脚）添加到数据表和列。这适用于标准和 PrimeFaces 组件。您必须将名称为 header（或 footer）的构面添加到 p:dataTable 或 p:column - 取决于您是否想要为表本身或列添加页眉（或页脚）。

使用 PrimeFaces，列更简单。只需在p:column 上添加属性headerText（或footerText。

看下面的例子：

<p:dataTable var="person" value="#{bean.persons}">  
  <f:facet name="header">  
    Persons  
  </f:facet>  
  <p:column>  
    <f:facet name="header">  
      Name
    </f:facet>  
    <h:outputText value="#{person.name}"/>
  </p:column>
  <p:column headerText="Email">  
    <h:outputText value="#{person.email}"/>
  </p:column>
</p:dataTable>

但是，我不知道是否可以为行添加“标题”。

请参阅PrimeFaces showcase 或PrimeFaces 3.3 user guide 了解更多详情。

如果您需要在每一行中来自资源包的不同文本，我会在 Java 代码中加载文本并将它们添加到数据表中显示的对象中。只需创建一个新类，该类扩展/代理/代理您要显示的原始类并添加属性headerLabel（来自资源包的值）。然后你可以这样做：

<p:dataTable var="person" value="#{bean.personsWithLabels}">  
  <p:column>  
    <h:outputText value="#{person.headerLabel}"/>
  </p:column>
  ...
</p:dataTable>

【讨论】：