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

Я рендеринг таблицы с 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>

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

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

<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, это имеет то преимущество, что не нужно метод фасоли затыловки.

однако я все еще получаю только набор цветов фона, а не всю ячейку.

6
jsf jsf-2 primefaces

2 ответов

вы можете добавить класс css в строку и в столбец, который идентифицирует ячейку. Используйте 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;
}
16

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

как то так

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