动态更改< h：dataTable>中的单元格的CSS样式柱 [英] Dynamically change CSS style of cell in <h:dataTable> column

问题描述

如何计算B列的单元格值以及如何动态更改其CSS样式

how to calculate cell values of B column and how to change their css style dynamically

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

my jsf code：

my jsf code :

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

推荐答案

您可以使用条件运算符？： in EL。

You can just use the conditional operator ?: in EL.

Eg

<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} code>＃{B} 。

If B is also used elsewhere in the model or controller, then you could add a public int getB() method which just contains return (A/C) * 100; and then use #{list.B} instead of #{B}.

注意，正确的设计是使用CSS类。 b
$ b

Note that proper design is to use a CSS class instead. E.g.

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

with

td .percentage {
    display: block;
}

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

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

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

你当然也可以在另一个答案建议的getter方法中执行CSS样式/类的确定，但这是一个很差的关注分离。

You can of course also perform the determination of CSS style/class in a getter method as suggested by the other answer, but that's a poor separation of concerns.

这篇关于动态更改< h：dataTable>中的单元格的CSS样式柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！