jsf-2 - jsf数据表中行的图像分隔符

Question

我想有条件地在行之间显示一条线/图像作为分隔符（如此处所示 - 附加图像），我不知道如何实现这一点，请建议，这是我为复制实际场景而编写的示例，

<h:panelGrid columns="1" >
<h:dataTable value="#{testBean.myBeanList}" var="myBean">
<h:column>
<f:facet name="header">  
<h:outputText value="EMPLOYEE NAME"  />  
</f:facet>
<h:outputText value="#{myBean.empName}"/>
</h:column>
<h:column>
<f:facet name="header">  
<h:outputText value="EMPLOYEE DEPARTMENT"  />  
</f:facet>
<h:outputText value="#{myBean.empDept}"/>
</h:column>
<h:column>
<f:facet name="header">  
<h:outputText value="EMPLOYEE HR NAME"  />  
</f:facet>
<h:outputText value="#{myBean.empHRName}"/>
</h:column>
</h:dataTable>
</h:panelGrid>



public TestBean() {
myBeanList = new ArrayList<MyBean>();
for(int i =0;i<8;i++){
MyBean mb = new MyBean();
if(i == 2 || i == 4){
mb.setEmpName("NAME"+i);
}else{
mb.setEmpName("EMPLOYEE NAME"+i);
mb.setEmpDept("EMPLOYEE DEPT"+i);
mb.setEmpHRName("EMPLOYEE HR NAME"+i);
}
myBeanList.add(mb);
}
}

Answer 1

使用 的rowClasses属性<h:dataTable>。它需要一个以逗号分隔的 CSS 类名字符串，这些类名将应用于后续生成的<tr>元素。然后，您可以使用 CSS 在相关单元<td>格<tr>（

<h:dataTable ... rowClasses="#{bean.rowClasses}">

在填充数据模型的同时，您还应该填充行类。对于屏幕截图中的特定示例，它应该返回如下内容：

none,none,separator,none,separator,none,none,none

然后你只需要提供必要的 CSS：

tr.separator td {
    border-top: 1px solid gray;
}

不需要丑陋和老式的分隔符图像。