Come posso colorare lo sfondo in modo condizionale in una cella di tabella?

Question

Sto visualizzando una tabella con p: dataTable (PrimeFaces) e ciò che voglio fare è colorare lo sfondo delle celle in base al valore del loro contenuto. Questo è diverso dal colorare una riga o una colonna: è la singola cella.

Primo un problema CSS. Se faccio questo:

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

il colore proprio del contenuti sfondo viene impostata, non l'intera cella. In altre parole il padding è ancora il default.

In secondo luogo, desidero rendere lo stile una espressione variabile. Posso aggiungere una funzione al backing bean, ma come posso accedere al contenuto della tabella nel metodo? Funzionerà?

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

EDIT:

ho trovato un modo per fare la parte condizionale, ma ho ancora bisogno di aiuto con la parte CSS. La mia soluzione si presenta come:

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

Anche se non amo arrivare a fantasia in EL, questo ha il vantaggio di non necessario un metodo di supporto di fagioli.

Tuttavia, ho solo il set di colori di sfondo, non l'intera cella.

Answer 1

È possibile aggiungere una classe CSS per la riga e alla colonna anche che identifica una cellula. Utilizzare l'attributo rowStyleClass del dataTable (example). Se si desidera colorare più righe:

<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

come circa l'aggiunta di imbottitura per la classe, con px o percentuali ...

qualcosa di simile

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