时间戳

首页 > 解决方案 > 如何根据 PrimeFaces 中的状态值（通过/失败）着色？

jquery - 如何根据 PrimeFaces 中的状态值（通过/失败）着色？

问题描述

我正在尝试使用 jQuery 根据列状态值（通过/失败/进行中）设置颜色。

我已经复制了表格并粘贴在 jsfiddle 中进行尝试，并且可以正常工作。但是，在实际的 XHTML 文件中，jQuery 不起作用。

.xhtml

    <ui:composition template="/pages/layout.xhtml">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {
          $('tr > td.y_n').each(function() {
              colsole.log("in function");
            if ($(this).text() === "Passed") {
                colsole.log("in if");
              $(this).css('background-color', '#FF0000');
            } else {
                colsole.log("in if else");
              $(this).css('background-color', '#3AC709');
            }
          });
        });


    </script>

    <p:dataTable id="idExecution" var="varTS" value="#{executionBean.lstLiveSelectedSuiteData}" style="margin-bottom:20px">

<f:facet name="header"> Steps </f:facet>

<p:column headerText="Status" class="y_n" >
        <h:outputText value="#{varTS.status}"  />
</p:column>

<p:column headerText="Error Message">
      <h:outputText value="#{varTS.errorMessage}" />
</p:column>
</p:dataTable>
 </ui:composition>

注意：jsfiddle 中给定的 HTML 是复制的运行时数据。(xhtml > html)

http://jsfiddle.net/z2ty0q8k/

我期待基于状态列值的颜色变化

标签： jquerycssprimefaces

解决方案

我觉得还是用Primefaces Datatable RowColor
比较好 首先，你必须在 css 中制作 styleclass。

CSS： 

<style type="text/css">
.passed {
    background-color: red !important;
}
.inProgress {
    background-color: green !important;
}   
</style>

然后你必须在数据表中使用rowStyleClass（这在你的代码中是错误的） 

<p:dataTable var="var" value="#{someBean.dataList}" rowStyleClass="#{someBean.checkStatus(var.status)}">
<p:column headerText="Id">
    <h:outputText value="#{var.id}" />
</p:column>

<p:column headerText="Status">
    <h:outputText value="#{var.status}" />
</p:column>
.
.
.
</p:dataTable>

对于检查状态，您可以在 ManageBean 中创建一个方法或使用带有内联 if 语句的 primefaces 示例：

    public String checkStatus(String status){
    if (status.equals("InProgress")) {
        //This is the styleClass in css
        return "inProgress";
    } else if (status.equals("Passed")){
        //This is the styleClass in css
        return "passed";
    }else{
        return null;
    }
 }

推荐阅读