在<h:datatable>列</h:datatable>中动态更改单元格的CSS样式

时间:2012-10-22 15:34:19

标签: css jsf primefaces

如何计算B列的单元格值以及如何动态更改其css样式 how to calculate the values of column B and how to change his color

我的java对象:

public class MyObject{
   private Date date;
   private int A;
   private int C;

   //Getters & Setters
}

我的托管bean:

public class MyBean(){
    List<MyObject> List = myObjectDao.FindAll();

    //Getters & Setters
}

我的jsf代码:

<p:dataTable id="idList" var="list" value="#{myBean.list}" >
    <p:column headerText="DATE">
        <h:outputText value="#{list.date}"  />
    </p:column>
        <p:column headerText="A">
        <h:outputText value="#{list.A}"  />
    </p:column>
        <p:column headerText="B">
        <h:outputText value="????????" style="???????"  //>
    </p:column>
        <p:column headerText="C">
        <h:outputText value="#{list.C} />
    </p:column>
</p:dataTable> 

3 个答案:

答案 0 :(得分:11)

您可以在EL中使用条件运算符?:

E.g。

<c:set var="B" value="#{(list.A / list.C) * 100}" />
<h:outputText value="#{B}" style="display: block; background-color: #{B lt 50 ? 'red' : (B lt 90 ? 'blue' : 'green')}" />

如果B也在模型或控制器的其他位置使用,那么您可以添加仅包含public int getB()的{​​{1}}方法,然后使用return (A/C) * 100;代替{{} 1}}。

请注意,正确的设计是使用CSS类。 E.g。

#{list.B}

#{B}

您当然也可以按照其他答案的建议在getter方法中执行CSS样式/类的确定,但这是一个很难分离的问题。

答案 1 :(得分:1)

我建议您在MyObject班级

中修改逻辑

所以我会在JSF中这样称呼它:

<p:column headerText="B">
    <h:outputText value="#{list.calculateB()}" styleClass="list.createLabel()">
</p:column>

内部MyObject

public double calculateB() {
   return (A/C)*100;
}


public String createLabel() {
   if(calculateB() > 90) {
       return "GREEN";
   //DO YOUR LOGIC

}
CSS

中的

.GREEN {
background-color: #00FF00 !important;

}

答案 2 :(得分:-1)

以下代码解决了我的问题。

style="#{event.eventStatusDesc eq 'Completed' ? 'color: #32cd32;font-weight: bold;':(event.eventStatusDesc eq 'Rescheduled till Further Notice' ? 'color: blue;font-weight: bold;' : 'color: black;')}" />