根据条件着色primefaces表格单元格

时间:2014-03-26 13:32:50

标签: css jsf-2 primefaces

这是我的第一个有素面的项目,我无法找出为什么我的细胞没有着色。 我的XHTML文件包含以下内容:

<h:head>
<title>Job Status Reporter</title>
<link rel="stylesheet" type="text/css" href="/jobstatusreport/colors.css" />
</h:head>

 ...

 <h:dataTable var="myJob" value="#{workPackage.jobs}"
    rowStyleClass="#{myJob.jobStatus == 'SUCCESS' ? 'green' : 
  (myJob.jobStatus == 'PARTIAL SUCCESS' ? 'yellow' : (myJob.jobStatus == 'FAILURE' ? 'red'   :'white'))}">
<h:column>
    <h:outputText value="#{myJob.jobId}" />
</h:column>
<h:column>
        <h:outputText value="#{myJob.jobType}" />
</h:column>
    <h:column>
    <h:outputText value="#{myJob.jobStatus}" />
    </h:column>
</h:dataTable>

我的colors.css文件在WebContent / resources / css /文件夹中创建,定义如下:

.green.ui-datatable { background: green;}

.red.ui-datatable {background: red;}

.yellow.ui-datatable {background: yellow;}

.white.ui-datatable {background: white;}

但是我的网络浏览器仍然没有颜色的单元格,有人能告诉我这是什么问题吗?

编辑:

当我将h:dataTable ...更改为p:dataTable时......我收到以下消息:

/globalReport.xhtml @32,169 rowStyleClass="#{myJob.jobStatus == 'SUCCESS' ? 'green' : (myJob.jobStatus == 'PARTIAL SUCCESS' ? 'yellow' : (myJob.jobStatus == 'FAILURE' ? 'red' : 'white'))}": Property 'jobStatus' not found on type org.hibernate.collection.internal.AbstractPersistentCollection$SetProxy 

有人可以帮忙吗?

2 个答案:

答案 0 :(得分:5)

我终于找到了解决方案: 在myJob类中,我添加了以下方法:

    public String createLabel(){

    switch (jobStatus){

    case "SUCCESS":
        return "SUCCESS";

    case "PARTIAL SUCCESS":
        return "PARTIAL_SUCCESS";

    case "FAILURE":
        return "FAILURE";

    default: 
        return "DEFAULT";   
    }
}

在我的globalReport.xhtml中,我更改了以下内容:

<h:head>
<title>Job Status Reporter</title>
<h:outputStylesheet library="css" name="colors.css" target="head" />
</h:head> 

....

<h:dataTable var="myJob" value="#{workPackage.jobs}">
    <h:column>
    <h:outputText value="#{myJob.jobId}"/>
</h:column>
    <h:column>
    <h:outputText value="#{myJob.jobType}"/>
</h:column>
    <h:column>
        <h:outputText value="#{myJob.jobStatus}" styleClass="#{myJob.createLabel()}"/>
</h:column>
</h:dataTable>

和我的colors.css是:

.SUCCESS{
background-color : green !important;
}

.FAILURE{
background-color: red !important; 
}

.PARTIAL_SUCCESS{
background-color: yellow !important;
}

.DEFAULT{
background-color: white !important; 
}

它完美无缺。非常感谢@Lukasz的宝贵帮助。

答案 1 :(得分:0)

您的情况与Color the rows of datatable based a condition in JSF 2类似。 h:dataTable没有这样的属性,因为你使用PrimeFaces,你应该使用他们的组件,因为它们提供了更多的功能。

使用<p:dataTable rowStyleClass="..." ... />以及<p:column../>

如果你在项目中生成样式类,那么它可能更具可读性并且更不容易出错,以防止过长而复杂的EL表达式。

您可能会注意到样式差异,因为PrimeFaces呈现的组件使用的是jQuery-UI CSS样式,但您可以像“h:”命名空间中的“旧”组件一样自定义它们。