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>

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

其次，我想将 style 字符串变为变量表达式。我可以向辅助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属性（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;
}

Answer 2

如何使用px或百分比向您的班级添加填充...

类似这样的事情

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

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

2 个答案: