Question

我尝试更改Primefaces Datatable的标题图像。我无法找到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;
}

请帮忙。

Answer 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>

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

Answer 2

对于所有表格：

th.ui-state-default{

...


}

Answer 3

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

感谢您的建议。

如何改变Primefaces Datatable的标题图像？

3 个答案: