1

我尝试更改 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;
}

请帮忙。

4

3 回答 3

0

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

  • .ui-datatable-header：表头

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

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

这是做到这一点的方法。当然，您可以微调您的 css 选择器，只让样式应用于具有特定 id 等的表格。

此外，这种风格适用于headers，而不是columns。换句话说，您需要一个标题，例如：

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

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

于 2013-09-05T06:55:06.113 回答
0

对于所有表：

th.ui-state-default{

...


}
于 2016-10-29T20:21:02.653 回答
0

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

谢谢你的建议。

于 2017-06-22T08:21:13.227 回答