Làm cách nào để tô màu nền theo điều kiện trong ô bảng?

Question

Tôi đang vẽ một bảng với p: dataTable (PrimeFaces) và những gì tôi muốn làm là tô màu nền của ô tùy theo giá trị nội dung của chúng. Điều này khác với tô màu một hàng hoặc một cột - đó là ô riêng lẻ.

Đầu tiên là một vấn đề về CSS. Nếu tôi làm điều này:

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

màu nền chỉ của nội dung được thiết lập, không phải toàn bộ tế bào. Nói cách khác, padding vẫn là mặc định.

Thứ hai, tôi muốn tạo kiểu kiểu chuỗi một biểu thức biến. Tôi có thể thêm hàm vào bean sao lưu, nhưng làm cách nào để truy cập nội dung bảng trong phương thức? Điều này có hiệu quả không?

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

EDIT:

tôi đã tìm ra một cách để làm phần có điều kiện, nhưng tôi vẫn cần được giúp đỡ với phần CSS. Giải pháp của tôi trông giống như:

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

Mặc dù tôi không thích sử dụng EL, điều này có lợi thế là không cần phương pháp sao lưu.

Tuy nhiên, tôi vẫn chỉ nhận được bộ màu nền chứ không phải toàn bộ ô.

Answer 1

Bạn có thể thêm một lớp css vào hàng và cột quá, danh sách chỉ rõ một ô. Sử dụng thuộc tính rowStyleClass của dataTable (example). Nếu bạn muốn màu sắc nhiều hàng:

<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

thế nào về việc thêm padding để lớp học của bạn, với px hoặc phần trăm ...

một cái gì đó như thế này

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