Question

这是Java代码

@ManagedBean
public class DatatableBean {

    private List<Employee> emplList = new ArrayList<Employee>();


    public DatatableBean(){
        emplList.add(new Employee("Jack", 1, "Engineer"));
        emplList.add(new Employee("Jim", 2, "Engineer"));
        emplList.add(new Employee("Kelly", 3, "Manager"));
    }

    public List<Employee> getEmplList() {
        return emplList;
    }

    public void setEmplList(List<Employee> emplList) {
        this.emplList = emplList;
    }

}

这是XHTML代码

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head><title>JSF datatable demo</title>

<style>
    .employee {
    font: verdana;
    background:green;
    }
    .manager {
    font: arial;
    background:blue;
    }
    .default {
    font: helvetica;
    background:red;
    }
</style>

</h:head> 
<body> 
<h:dataTable rowClasses="#{empl.designation  eq 'Manager' ? 'manager' : empl.designation eq 'Engineer' ? 'employee' : 'default'}"
    <h:column>
        <f:facet name="header">
            <h:outputText value="Id" />
        </f:facet>
        <h:outputText value="#{empl.id}" />
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Name" />
        </f:facet>
        <h:outputText value="#{empl.name}" />
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Designation" />
        </f:facet>
        <h:outputText value="#{empl.designation}" />
    </h:column>

</h:dataTable>
</body> 
</html>

我按照这个回答

Color the rows of datatable based a condition in JSF 2

并编写了上面的代码。但是只有默认的css在浏览器中呈现为所有行。

即使我改变了＃eq＆＃39;到＆＃39; ==＆＃39;，输出保持不变。

这是在浏览器中呈现的代码

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>JSF datatable demo</title>

<style>
    .employee {
    font: verdana;
    background:green;
    }
    .manager {
    font: arial;
    background:blue;
    }
    .default {
    font: helvetica;
    background:red;
    }
</style></head> 
<body><table>
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Designation</th>
</tr>
</thead>
<tbody>
<tr class="default">
<td>1</td>
<td>Jack</td>
<td>Engineer</td>
</tr>
<tr class="default">
<td>2</td>
<td>Jim</td>
<td>Engineer</td>
</tr>
<tr class="default">
<td>3</td>
<td>Kelly</td>
<td>Manager</td>
</tr>
</tbody>
</table>

</body> 
</html>

请帮忙

提前致谢

Answer 1

这个答案很好用

JSF: Changing datatable cell color dynamically

我不确定为什么我无法在rowClasses属性中使用var属性值

更新了代码

XHTML代码

<h:outputText value="#{datatableBean.rowClass}" />
<h:dataTable 
value="#{datatableBean.emplList}" var="empl" rowClasses="#{datatableBean.rowClass}" >
    <h:column>
        <f:facet name="header">
            <h:outputText value="Id" />
        </f:facet>
        <h:outputText value="#{empl.id}" />
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Name" />
        </f:facet>
        <h:outputText value="#{empl.name}" />
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Designation" />
        </f:facet>
        <h:outputText value="#{empl.designation}" />
    </h:column>

</h:dataTable>

这是Java代码（使用上述Java代码添加此方法）

public String getRowClass() {
    StringBuilder rowClasses = new StringBuilder();

    for (Employee employee : emplList) {
        if (rowClasses.length() > 0) rowClasses.append(",");
        if(employee.getDesignation().equalsIgnoreCase("Engineer")) {
             rowClasses.append("employee");
        } else if(employee.getDesignation().equalsIgnoreCase("Manager")) {
            rowClasses.append("manager");
        }

    }
    return rowClasses.toString();
}

并且输出按预期工作。

谢谢！

颜色JSF数据表的行不起作用

1 个答案: