Как условно раскрасить фон в ячейке таблицы? - PullRequest
Новая
       0

Как условно раскрасить фон в ячейке таблицы?

7 голосов
/ 11 марта 2012

Я отрисовываю таблицу с p: dataTable (PrimeFaces), и я хочу покрасить фон ячеек в зависимости от значения их содержимого. Это отличается от окрашивания строки или столбца - это отдельная ячейка.

Сначала проблема с CSS. Если я сделаю это: 

                    <p:column headerText="xyzzy">
                        <div style="background-color: green">
                            <h:outputText value="#{rowVar.anumber}" >
                                <f:convertNumber groupingUsed="true" />
                            </h:outputText>                        
                        </div>
                    </p:column>

устанавливается цвет фона только для содержимого , а не для всей ячейки. Другими словами, отступы по-прежнему используются по умолчанию.

Во-вторых, я хочу сделать строку style переменным выражением. Я могу добавить функцию к компоненту поддержки, но как мне получить доступ к содержимому таблицы в методе? Будет ли это работать? 

<div style="#{bean.computeCSS(rowVar.number}">

EDIT:

Я нашел способ выполнить условную часть, но мне все еще нужна помощь с частью CSS. Мое решение выглядит так: 

                    <p:column headerText="xyzzy">
                        <div class="#{rowVar.anumber gt 0 ? 'colored' : ''}">
                            <h:outputText value="#{rowVar.anumber}">
                                <f:convertNumber groupingUsed="true" />
                            </h:outputText>                        
                        </div>
                    </p:column>

Несмотря на то, что мне не нравится увлекаться EL, у него есть то преимущество, что ему не нужен метод поддерживающего бина.

Однако я по-прежнему могу установить только цвет фона, а не всю ячейку.

Ответы [ 2 ]

17 голосов
/ 12 марта 2012

Вы можете добавить класс css к строке и столбцу, который идентифицирует ячейку. Используйте атрибут rowStyleClass dataTable ( пример ). Если вы хотите раскрасить несколько строк: 

<p:dataTable value="#{bean.rows}" var="rowVar"
     rowStyleClass="#{rowVar.firstCol gt 0 ? 'firstColColored' : ''}
                           #{rowVar.secondCol gt 0 ? 'secondColColored' : ''}">
     <p:column styleClass="firstCol">...
     <p:column styleClass="secondCol">

CSS: 

.firstColColored .firstCol {
     background: pink;
}
1 голос
/ 12 марта 2012

как насчет добавления отступов в ваш класс, с пикселями или процентами ...

как-то так 

.colored{
    background-color:yellow;
    padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
}
...