JSF学习之DataTable介绍

JSF学习之DataTable介绍

在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

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

程序清单4 TableData.java

 1public class TableData {
 2private static final Name[] names=new Name[]{
 3new Name("Willian","Dupont",
 4new Name("Anna","Keeney",
 5new Name("Maoko","Randor",
 6new Name("John","Wilson"
 7};
 8public  Name[] getNames() {
 9return 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。
    其他应用：数据库表格、表格模型以及分类和筛选等。