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

Question

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

仅设置内容的背景颜色,而不是整个单元格.换句话说,填充仍然是默认值.

其次,我想使样式字符串成为变量表达式.我可以向辅助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方法.

但是我仍然只获得背景颜色,而不是整个细胞.

Answer 1

您可以将css类添加到行和列中,以标识单元格.使用dataTable的rowStyleClass属性(示例).如果要为多行着色:

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