Как покрасить на основе значения состояния (пройдено / не выполнено) в PrimeFaces?

Question

Я пытаюсь установить цвет в зависимости от значения статуса столбца (Пройдено / Ошибка / InProgress) с помощью 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>

Примечание: с учетом HTML в jsfiddle копируются данные времени выполнения. (xhtml> html)

http://jsfiddle.net/z2ty0q8k/

Я ожидаю изменения цвета в зависимости от значения в столбце состояния

Answer 1

Я думаю, что лучше использовать Primefaces Datatable RowColor
Прежде всего, вы должны сделать styleclass в css.

---

CSS:

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

---

Тогда вы должны использовать в datatable 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 метод или использовать что-то вроде простого примера с оператором inline if:

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