JSF的标准HTML标签中(Standard HTML Tags)有h:panelGrid、h:dataTable,即实现HTML中的table标签功能。 h:panelGrid、h:dataTable都有两个特殊的CSS样式属性,columnClasses(列样式类)和rowClasses(行样式类),它们不单单是加载一个CSS样式,而是加载一个CSS样式类,并且循环这个样式类,从而丰富了并简化了表格的表现。 例如要做一个3行6列的表格,定义有两个样式 |
.td2 { background:#990000; }
那我们在写JSF的时候只需要在h:panelGrid中加入columnClasses列(或rowClasses行)属性,其中是CSS类的列表,类之间用逗号分隔。如果这些列表包含的类名要比列或行少,则重新使用CSS类,即再次循环列表中的CSS样式。
<h:outputText value="01"/>
<h:outputText value="02"/>
<h:outputText value="03"/>
<h:outputText value="04"/>
<h:outputText value="05"/>
<h:outputText value="06"/>
<h:outputText value="07"/>
<h:outputText value="08"/>
<h:outputText value="09"/>
<h:outputText value="10"/>
<h:outputText value="11"/>
<h:outputText value="12"/>
<h:outputText value="13"/>
<h:outputText value="14"/>
<h:outputText value="15"/>
<h:outputText value="16"/>
<h:outputText value="17"/>
<h:outputText value="18"/>
</h:panelGrid>
如果是用的如下rowClasses行属性
则表格表现为
当列和行两个属性都使用时,则样式服从于列样式,例如
则表格表现和单独使用columnClasses列样式相同。
原文 http://www.java3z.com/cwbwebhome/article/article2a/220.html?id=125
在JSF DataTable使用中的一些心得:
1. 要有分页功能,每页资料最好不要超过20行
2. 尽量避免在rowClasses和columnClasses中写复杂的CSS
3. 对于资料查询型的页面,最好不要用JavaScript遍历所有控件,因为有时控件的数量会令你吃惊的。
<
style
>
.even-row {
background-color: #FCFFFE;
}
.odd-row {
background-color: #ECF3FE;
}
.active-row {
background-color: #FFEBDA !important;
cursor: pointer;
}
</
style
>
<
h:form
id
=
"form"
>
<
rich:dataTable
value
=
"#{carsBean.allInventoryItems}"
var
=
"car"
id
=
"table"
rows
=
"20"
rowClasses
=
"odd-row, even-row"
styleClass
=
"stable"
>
<
rich:column
accept
=
"#{carsFiteringBean.acceptVendor}"
>
<
f:facet
name
=
"header"
>
<
h:outputText
value
=
"Vendor "
/>
</
f:facet
>
<
h:outputText
value
=
"#{car.vendor}"
/>
</
rich:column
>
<
rich:column
>
<
f:facet
name
=
"header"
>
<
h:outputText
value
=
"Model"
/>
</
f:facet
>
<
h:outputText
value
=
"#{car.model}"
/>
</
rich:column
>
<
rich:column
>
<
f:facet
name
=
"header"
>
<
h:outputText
value
=
"Price"
/>
</
f:facet
>
<
h:outputText
value
=
"#{car.price}"
/>
</
rich:column
>
<
rich:column
filter
=
"#{carsFilteringBean.mileageFilterImpl}"
>
<
f:facet
name
=
"header"
>
<
h:outputText
value
=
"Mileage"
/>
</
f:facet
>
<
h:outputText
value
=
"#{car.mileage}"
/>
</
rich:column
>
<
rich:column
>
<
f:facet
name
=
"header"
>
<
h:outputText
value
=
"VIN "
/>
</
f:facet
>
<
h:outputText
value
=
"#{car.vin}"
/>
</
rich:column
>
</
rich:dataTable
>
</
h:form
>
<
rich:jQuery
selector
=
".stable tr:odd"
query
=
"addClass('odd-row')"
/>
<
rich:jQuery
selector
=
".stable tr:even"
query
=
"addClass('even-row')"
/>
<
rich:jQuery
selector
=
".stable tr"
event
=
"mouseover"
query
=
"jQuery(this).addClass('active-row')"
/>
<
rich:jQuery
selector
=
".stable tr"
event
=
"mouseout"
query
=
"jQuery(this).removeClass('active-row')"
/>
</
ui:composition
>
http://www.richfacescn.com/topic_detail.html?id=167