¿Cómo coloreo condicionalmente el fondo en una celda de tabla?

Question

Estoy representando una tabla con p: dataTable (PrimeFaces) y lo que quiero hacer es colorear el fondo de las celdas en función del valor de su contenido. Esto es diferente de colorear una fila o una columna: es la celda individual.

Primero un problema de CSS. Si hago esto:

    <p:column headerText="xyzzy"> 
         <div style="background-color: green"> 
          <h:outputText value="#{rowVar.anumber}" > 
           <f:convertNumber groupingUsed="true" /> 
          </h:outputText>       
         </div> 
        </p:column> 

el color de fondo simplemente del contenido consigue el sistema, no la totalidad de células. En otras palabras, el relleno sigue siendo el predeterminado.

En segundo lugar, quiero hacer que el estilo cadena una expresión variable. Puedo agregar una función al bean de respaldo, pero ¿cómo accedo al contenido de la tabla en el método? esto funcionara?

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

EDIT:

me di cuenta de una manera de hacer la parte condicional, pero todavía necesita ayuda con la parte CSS. Mi solución que parece:

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

A pesar de que no me gusta llegar a la fantasía en EL, esto tiene la ventaja de que no es necesario un método de bean de respaldo.

Sin embargo, solo obtengo el conjunto de colores de fondo, no toda la celda.

Answer 1

Puede agregar una clase CSS a la fila y la columna que también, que identifica Una célula. Utilice el atributo rowStyleClass de dataTable (example). Si desea colorear varias filas:

<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

cómo sobre la adición de relleno para su clase, con píxeles o porcentajes ...

algo como esto

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