如何有条件地为表格单元格中的背景着色？答案

【问题标题】：How do I conditionally color the background in a table cell?如何有条件地为表格单元格中的背景着色？
【发布时间】：2012-03-11 16:36:59
【问题描述】：

我正在使用 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>

设置了 content 的背景色，而不是整个单元格。换句话说，填充仍然是默认值。

其次，我想让 style 字符串成为变量表达式。我可以向 backing bean 添加一个函数，但是如何访问方法中的表格内容？这行得通吗？

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

编辑：

我想出了一种方法来处理条件部分，但我仍然需要 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，但这样做的好处是不需要支持 bean 方法。

但是我仍然只设置背景颜色，而不是整个单元格。

【问题讨论】：

标签： jsf jsf-2 primefaces

【解决方案1】：

您也可以向行和列添加一个 css 类，以标识一个单元格。使用 dataTable 的 rowStyleClass 属性 (example)。如果要为多行着色：

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

【讨论】：

【解决方案2】：

如何为你的类添加填充，使用 px 或百分比...

类似的东西

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

【讨论】：