dataTable

xiaoxiao2022-06-14  37

h:dataTable标签动态地用表格的方式输出数据, 它是JSF独有的东西,它会被翻译为一个htmltable,,感觉就和strutslogiciterator差不多,下面是一般的用法:

< 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可以是一个集合(其类型可以是arrayjava.util.Listjava.sql.ResultSetjavax.servlet.jsp.jstl.sql.Resultjavax.faces.model.DataModel,循环遍历所有的item),或者是其他任何非集合的元素(循环一次)。注意1h:dataTable里面只能包含h:column2)在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:panelGridh: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完整例子(取数据、分页、样式等)
转载请注明原文地址: https://www.6miu.com/read-4938409.html

最新回复(0)