h:dataTable标签动态地用表格的方式输出数据, 它是JSF独有的东西,它会被翻译为一个html的table,,感觉就和struts的logic:iterator差不多,下面是一般的用法:
< h:dataTable value ='#{items}' var ='item'> 2 3 <h:column > 4 5 < %-- left column components --% > 6 7 < h:outputText value ='#{item.propertyName}'/> 8 9 </h:column > 10 11 12 13 < h:column > 14 15 < %-- next column components --% > 16 17 < h:outputText value ='#{item.anotherPropertyName}'/>18 19 </h:column > 20 21 22 23 < %-- add more columns, as desired --% > 24 25 </ h:dataTable > 26
其中这个items可以是一个集合(其类型可以是array、java.util.List、java.sql.ResultSet、javax.servlet.jsp.jstl.sql.Result、javax.faces.model.DataModel,循环遍历所有的item),或者是其他任何非集合的元素(循环一次)。注意1)h:dataTable里面只能包含h:column。2)在h:dataTable这种能render子元素的标签中,要显示原始文本的话,要用<f:verbatim></f:verbatim>将文本包含起来(或者用h:outputText)。3) <f:facet name="header">和<f:facet name="footer">可以制定表头和表尾。
h:dataTable有以下这些属性:
bgcolor
Background color for the tableborder
Width of the table's bordercellpadding
Padding around table cells cellspacing
Spacing between table cells columnClasses
Comma-separated list of CSS classes for columnsfirst
Index of the first row shown in the tablefooterClass
CSS class for the table footer frame
Specification for sides of the frame surrounding the table should be drawn; valid values: none, above, below, hsides, vsides, lhs, rhs, box, borderheaderClass
CSS class for the table header rowClasses
Comma-separated list of CSS classes for columns rules
Specification for lines drawn between cells; valid values: groups, rows, columns, all summary
Summary of the table's purpose and structure used for non-visual feedback such as speechvar
The name of the variable created by the data table that represents the current item in the value binding, id, rendered, styleClass, value
Basic attributesdir, lang, style, title, width
HTML 4.0onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
DHTML events
f:facet标签用来为包含f:facet标签的父组件与被f:facet标签所包含的子组件之间申明一种特殊的关系。常与h:panelGrid,h:dataTable等标签连用,申明组件为标题或页脚。
f:facet用法例:
f:facet常用用法
<jsf组件> <f:facet name="facet名">...jsf组件</f:facet></jsf组件>
h:dataTable使用f:facet例:
<h:dataTable value="#{myBean.bookList}" var= "book" border="1px"> <h:column> <f:facet name="header"> <h:outputText value="Title"/> </f:facet> <h:outputText value="#{book.title}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Price"/> </f:facet> <h:outputText value="#{book.price}"/> </h:column></h:dataTable>
对应HTML代码:
<table border="1px"> <thead> <tr> <th>Title</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>老人与海</td> <td>23.00</td> </tr> </tbody></table>
浏览器显示:
Title
Price
老人与海
23.00
相关资源:Jquery dataTable完整例子(取数据、分页、样式等)
