动态更改列中单元格的CSS样式

前端之家收集整理的这篇文章主要介绍了动态更改列中单元格的CSS样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何计算B列的单元格值以及如何动态更改其css样式

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

解决方法

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

例如.

<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()方法,它只包含return(A / C)* 100;然后使用#{list.B}代替#{B}.

请注意,正确的设计是使用CSS类.例如.

<h:outputText value="#{B}" styleClass="percentage #{B lt 50 ? 'poor' : (B lt 90 ? 'average' : 'good')}" />

td .percentage {
    display: block;
}

.percentage.poor {
    background-color: red;
}

.percentage.average {
    background-color: blue;
}

.percentage.good {
    background-color: green;
}

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

猜你在找的CSS相关文章