在Web應用中,html表格常用于放置內容。JSF允許使用h:dataTable標簽來放置組件,其遍歷數據來創建html表格。
1
?
<
h:dataTable?
value
="#{item}"
?var
="item"
>
2
<
h:column
><
h:outputText?
value
="#{item.name}"
/></
h:column
>
3
<
h:column
><
h:outputText?
value
="#{item.another}"
/></
h:column
>
4
?
</
h:dataTable
>
???value屬性表示所要遍歷的數據,其可以是下列值之一:數組、List、java.sql.List實例、javax.servlet.jsp.jstl.Result實例、javax.faces.model.DataModel實例。在每次遍歷之前,創建一個請求范圍內的變量,并使用var屬性來命名。當遍歷時,它將數組、列表、結果集等中的每個項目都放到該標簽的正文體中,使用var屬性指定的名稱來引用。
????正如上例所顯示的那樣,h:dataTable標簽的正文體只包含h:column標簽,除了可
選的標題和腳注組件之外,每列都可以包含無數的組件。任何時候都可以在有自組
建的組件內部指定模板文件(即不是JSF標簽的其他東西),但必須將這些模板文
本封裝到f:verbatim標簽的正文體內或者使用h:outputText來產生該模板文本。例如:
1
<
h:column
>
2
<
h:outputText?
value
="#{item.name}"
/>
3
<
f:verbatim
>
,
</
f:verbatim
>
4
</
h:column
>
使用f:facet來為表格添加標題和腳注,如:
1
<
h:column
>
2
<
f:facet?
name
="header"
><
h:outputText?
value
="#{msgs.nameColumn}"
/></
f:facet
>
3
<
f:facet?
name
="footer"
><
h:outputText?
value
="#{msgs.footerColumn}"
/></
f:facet
>
4
</
h:column
>
???要在表格的標題和腳注中添加多個組件,必須在h
anelGroup標簽中將它們分成組,或者使用h
anelGrid或h:dataTable來將它們放到一個容器組件中。如果在一個facet中放置多個組件,只會顯示第一個組件。
????可以向表格中添加任何我們所需要的組件,并使用rendered屬性來進行有條件的呈現、處理事件等。
????使用dataTable實例:?編輯表格單元—只需提供所需要編輯的輸入組件,單擊復選框來編輯行,然后單擊保存修改按鈕來保存更改。
程序清單1?index.jsp


?1
<%@?page?contentType="text/html;?charset=gb2312"%>
?2
?3
<%@?taglib?uri="/html"?prefix="h"%>
?4
<%@?taglib?uri="/core"?prefix="f"%>
?5
<f:view>
?6
<f:loadBundle?basename="com.corejsf.messages"?var="msgs"?/>
?7
<link?href="styles.css"?rel="stylesheet"?type="text/css"/>
?8
<title><h:outputText?value="#{msgs.windowTitle}"?/></title>
?9
10
<h:form>
11
<h:dataTable?value="#{tableData.names}"?var="name">
12
<h:column>
13
<f:facet?name="header">
14
<h:outputText?value="#{msgs.editColumn}"?style="font-weight:bold"/>
15
</f:facet>
16
<h:selectBooleanCheckbox?value="#{name.editable}"?onclick="submit()"/>
17
</h:column>
18
<h:column>
19
??<f:facet?name="header">
20
<h:outputText?value="#{msgs.lastnameColumn}"?style="font-weight:bold"/>
21
??</f:facet>
22
<h:inputText?value="#{name.last}"?rendered="#{name.editable}"?size="10"/>
23
<h:outputText?value="#{name.last}"?rendered="#{not?name.editable}"/>
24
</h:column>
25
<h:column>
26
??<f:facet?name="header">
27
<h:outputText?value="#{msgs.firstnameColumn}"?style="font-weight:bold"/>
28
??</f:facet>
29
??<h:inputText?value="#{name.first}"?rendered="#{name.editable}"?size="10"/>
30
??<h:outputText?value="#{name.first}"?rendered="#{not?name.editable}"/>
31
</h:column>
32
</h:dataTable><p>
33
<h:commandButton?value="#{msgs.saveChangesButtonText}"/>
34
</h:form>
35
<h:messages/>
36
37
</f:view>
38
?
復選框的值與當前名稱是否處于編輯狀態相一致,如果處于編輯狀態,則該復選框被選中,出現的是輸入組件inputText,否則呈現的是輸出組件outputText.
程序清單2?messages.properties
windowTitle=Editing?Table?Cells
lastnameColumn=Last?Name
firstnameColumn=First?Name
editColumn=Edit
alphanumeric=[alpha]
saveChangeButtonText=Save?Changes 程序清單3?Name.java


?1
public?class?Name?
{
?2
private?String?first;
?3
private?String?last;
?4
boolean?editable=false;
?5
public?Name(String?first,String?last)
{
?6
this.first=first;
?7
this.last=last;
?8
}
?9
//相應的getter/setter方法
10
}
11
程序清單4?TableData.java

?1
public?class?TableData?
{
?2
private?static?final?Name[]?names=new?Name[]
{
?3
new?Name("Willian","Dupont",
?4
new?Name("Anna","Keeney",
?5
new?Name("Maoko","Randor",
?6
new?Name("John","Wilson"
?7
};
?8
public??Name[]?getNames()?
{
?9
return?names;
10
}} 程序清單5?faces-config.xml

faces-config.xml配置
?1
<faces-config>
?2
<application>
?3
<locale-config><default-locale>en</default-locale></locale-config>
?4
</application>
?5
<managed-bean>
?6
<managed-bean-name>tableData</managed-bean-name>
?7
<managed-bean-class>com.corejsf.TableData</managed-bean-class>
?8
<managed-bean-scope>session</managed-bean-scope>
?9
</managed-bean>
10
</faces-config>
程序清單6?web.xml?

web.xml配置
1
???<servlet>
2
????????<servlet-name>Faces?Servlet</servlet-name>
3
????????<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
4
????</servlet>
5
????<servlet-mapping>
6
????????<servlet-name>Faces?Servlet</servlet-name>
7
????????<url-pattern>*.faces</url-pattern>
8
????</servlet-mapping>???
?還可以為指定相應行和列的樣式,h:dataTable具有指定css類的一些屬性,如styleClass(將表格作為一個整體)、headerClass和footerClass(列標題和腳注)、columnClasses和rowClasses(單獨的行和列)。?其中rowClasses和columnClasses屬性是互斥的,若二者皆指定則會使用columnClasses。
????其他應用:數據庫表格、表格模型以及分類和篩選等。