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的{​​{1}}属性。它需要一个逗号分隔的CSS类名字符串，这些字符串应用于后续生成的<h:dataTable>元素。然后，您可以使用CSS在所讨论的<tr>的每个单元格（<td>）中放置一个顶部边框（在您的示例中为“NAME2”和“NAME4”）。

<tr>

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

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

然后你必须提供必要的CSS：

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

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