मैं तालिका कक्ष में पृष्ठभूमि को सशर्त रूप से कैसे रंगूं?

Question

मैं पी के साथ एक तालिका प्रस्तुत कर रहा हूं: डेटाटेबल (प्राइमफेस) और जो मैं करना चाहता हूं वह उनकी सामग्री के मूल्य के आधार पर कोशिकाओं की पृष्ठभूमि रंग है। यह एक पंक्ति या कॉलम रंग से अलग है - यह व्यक्तिगत सेल है।

पहले एक सीएसएस समस्या।

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

सिर्फ सामग्री की पृष्ठभूमि का रंग सेट हो जाता है, न कि पूरी सेल: मैं ऐसा करते हैं तो। दूसरे शब्दों में पैडिंग अभी भी डिफ़ॉल्ट है।

दूसरा, मैं शैली स्ट्रिंग एक चर अभिव्यक्ति बनाना चाहता हूं। मैं बैकिंग बीन में एक फ़ंक्शन जोड़ सकता हूं, लेकिन मैं विधि में तालिका सामग्री को कैसे एक्सेस करूं? यह काम करेगा?

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

संपादित करें:

मैं सशर्त हिस्सा करने के लिए एक तरीका खोज निकाला, लेकिन मैं अभी भी सीएसएस भाग के साथ मदद की जरूरत है। मेरे समाधान लगता है:

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

हालांकि मैं ईएल में कल्पना के लिए हो रही नापसंद, यह एक समर्थन सेम विधि की जरूरत नहीं का लाभ दिया है।

हालांकि मुझे अभी भी केवल पृष्ठभूमि रंग सेट मिलता है, न कि संपूर्ण सेल।

Answer 1

तरह px या percents के साथ अपने वर्ग के लिए गद्दी जोड़ने, ...

चीज के बारे में आप भी पंक्ति को और स्तंभ के लिए एक सीएसएस वर्ग जोड़ सकते हैं, कि पहचान करता है एक कोशिका। डेटा का उपयोग करेंटेबल 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"> 

सीएसएस:

.firstColColored .firstCol { 
    background: pink; 
} 

Answer 2

कैसे इस

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