primefaces - primefacesデータテーブルの行の色付け

Question

データ可能な行を異なる色で表示したい。

rowStyleClass 属性を使用しています。しかし、それは色を変えていません

データテーブルの私のコードは、

rowStyleClass="highlight";

私のcssファイルは次のようになります。

.highlight {
    background: yellow  !important ;
}

Answer 1

次の場合、rowStyleClass 属性で、色と使用が異なる 2 つのクラスをインラインで使用する必要があります。

rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}" 

データテーブルのrowIndexVar属性で「rowIndex」を設定する必要がある場所

rowIndexVar="rowIndex"

つまり、偶数行には行スタイル クラスが「highlight1」に設定され、奇数行には「highlight2」が設定されます。

詳細はこちら

Answer 2

最も簡単な方法は、デフォルトで実装されている CSS にクラスを実装.ui-datatable-oddしてスタイルを設定することです。例：.ui-datatable-evenp:dataTable

.ui-datatable-odd {
    background: #ffffff;
}

.ui-datatable-even {
    background: #F2F5F9;
}

最終的には次のようになります

より具体的なセレクターを使用する必要がある可能性があります。そのための CSS の特異性について読んでください。