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

我正在渲染一个表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方法的优势。

但是我仍然只获取背景颜色集，而不是整个单元格。

来源

2012-03-11 AlanObject

您可以添加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; 
}

来源

2012-03-11 20:38:24 Adam

如何添加填充你的课，用像素或百分比...

像这样

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

来源

2012-03-11 20:02:05 Daniel

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

回答

相关问题