1

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;
}

助けてください。

4

3 に答える 3

0

primefaces のドキュメントには、各コンポーネントのどの部分にどのクラスを適用するかについて、非常に優れたドキュメントがあります。データテーブル ヘッダーの場合、次のスタイルクラスをオーバーライドする必要があります。

  • .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>

また、datatable コンポーネントで styleclass を指定する必要がないことにも注意してください。

于 2013-09-05T06:55:06.113 に答える
0

すべてのテーブル:

th.ui-state-default{

...


}
于 2016-10-29T20:21:02.653 に答える