如何更改 Primefaces Datatable 的标题图像？答案

【问题标题】：How to change header image of Primefaces Datatable?如何更改 Primefaces Datatable 的标题图像？
【发布时间】：2013-09-08 20:50:04
【问题描述】：

我尝试更改 Primefaces 数据表的标题图像。但是我无法找到 Datatable 标头的确切 css 类。样式类如下

     .thresholdTableClass.ui-datatable .ui-datatable-header {
      border: 1px solid #bed6f8;
      background: #c6deff url(../img/header-panel.png) repeat-x !important;
      font-weight: bold;
      color: #FFFFFF;
      }

我的数据表是

<p:dataTable id="thresholdPanel" var="threshold"
          value="#{target.thresholdVOList}" editable="true"
           rowIndexVar="thresholdRowCntr" styleClass="thresholdTableClass">      
</p:dataTable>

但上述值不会影响我的数据表标题。

我试图找出样式类，但我发现的是

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: url("/EdgeApp/javax.faces.resource/images/default.png.xhtml?ln=primefaces-bluesky") repeat-x scroll 0 0 #C6DEFF;
border: 1px solid #BED6F8;
color: #000000;
font-weight: bold;
}

请帮忙。

【问题讨论】：

标签： jsf jsf-2 primefaces datatable

【解决方案1】：

The primefaces documentation 有很好的文档说明哪些类适用于每个组件的哪个部分。对于数据表标题，应覆盖以下样式类：

.ui-datatable-header：表头

我刚刚验证添加背景图片有效：

.ui-datatable-header {
    background: url(../images/myImage.png)
}

这是实现它的方法。当然，您可以微调您的 CSS 选择器，只让样式适用于具有特定 id 的表格等。

此外，此样式适用于标题，而不适用于列。换句话说，您需要一个标题，例如：

<p:dataTable>
    <f:facet name="header">
        <h:outputText value="Header text" />
    </f:facet>
</p:dataTable>

另外请注意，您不必在数据表组件上指定样式类。

【讨论】：

感谢您的回复。我已经尝试过使用 ui-datatable-header 类，这对我也不起作用。我需要更改某些数据表的标题，而不是页面中的所有表。无论如何，我找到了具有自定义样式类的解决方案，例如 .customStyleClass .ui-state-default。

【解决方案2】：

对于所有表格：

th.ui-state-default{

...


}

【讨论】：

【解决方案3】：

.customStyleClassName .ui-state-default{ } 将解决上述问题。

感谢您的建议。

【讨论】：