Я хочу показать строки данных с разными цветами.
Я использую атрибут rowStyleClass. Но он не меняет цвета
Мой код в datatable,
rowStyleClass="highlight";
и мой файл css выглядит так:
.highlight {
background: yellow !important ;
}
Я хочу показать строки данных с разными цветами.
Я использую атрибут rowStyleClass. Но он не меняет цвета
Мой код в datatable,
rowStyleClass="highlight";
и мой файл css выглядит так:
.highlight {
background: yellow !important ;
}
Вы должны иметь два класса с разными цветами и использовать их в атрибуте rowStyleClass, если они встроены:
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}"
Где "rowIndex" вы должны установить в атрибуте datatable rowIndexVar
rowIndexVar="rowIndex"
Это означает, что четные строки будут иметь класс стиля строки, установленный как 'highlight1', а нечетные строки - 'highlight2'
Самый простой способ - реализовать классы стилей .ui-datatable-odd
и .ui-datatable-even
в CSS, которые по умолчанию выполняются p:dataTable
. Пример:
.ui-datatable-odd {
background: #ffffff;
}
.ui-datatable-even {
background: #F2F5F9;
}
В конце концов выглядит что-то вроде
Возможно, вам нужно использовать более конкретные селектора, прочитать о специфике CSS для этого
Попробуйте это... Он работает в моем случае
.ui-widget-content .ui-datatable-even{
background: #F2F5F9;
}
.ui-widget-content .ui-datatable-odd{
background: red;
}
Тудор ответ правильный путь. Если вы используете treeTable, вы можете сделать это следующим образом:
.ui-treetable tbody tr:nth-child(odd) {
background-color: #edf2f6 !important;
}
.ui-treetable tbody tr:nth-child(even) {
background-color: #ffffff !important;
}