1

条件付きで行の間に行/画像をセパレーターとして表示したい (ここに示すように - 画像が添付されている)、これを達成する方法がわかりません。提案してください。これは、実際のシナリオを再現するために書いたサンプルです。

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

ここに画像の説明を入力

4

1 に答える 1

0

rowClassesの属性を使用します<h:dataTable>。これは、後続の生成された<tr>要素に適用されるCSSクラス名の連結された文字列を取ります。次に、CSSを使用して、問題のすべてのセル（<td>）に上枠を配置でき<tr>ます（例では「NAME2」と「NAME4」のセル）。

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

データモデルにデータを入力すると同時に、行クラスにもデータを入力する必要があります。スクリーンショットの特定の例では、次のようなものが返されるはずです。

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

次に、必要なCSSを提供する必要があります。

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

醜い昔ながらのセパレーター画像は必要ありません。

于 2012-12-14T12:05:21.253 に答える