JSF——表格处理

来源：互联网发布：淘宝客服售后工作编辑：程序博客网时间：2024/06/06 09:21

表格处理
对于必须使用表格方式呈现的数据，JSF 的 <h:dataTable> 卷标协助您进行动态表格数据的输出。
o 简单的表格
o 表头, 表尾
o TableModel 类别

简单的表格

很多資料經常使用表格來表現，JSF提供<h:dataTable>標籤讓您得以列舉資料並使用表格方式來呈現，舉個實際的例子來看，假設您撰寫了以下的兩個類別：

UserBean.java

package onlyfun.caterpillar;

public class UserBean {

private String name;

private String password;

public UserBean() {

}

public UserBean(String name, String password) {

this.name = name;

this.password = password;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

TableBean.java

package onlyfun.caterpillar;

import java.util.*;

public class TableBean {

private List userList;

public List getUserList() {

if(userList == null) {

userList = new ArrayList();

userList.add(new UserBean("caterpillar", "123456"));

userList.add(new UserBean("momor", "654321"));

userList.add(new UserBean("becky", "7890"));

}

return userList;

}

　　在TableBean中，我們假設getUserList()方法實際上是從資料庫中查詢出UserBean的內容，之後傳回List物件，若我們的 faces-config.xml如下：

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems,

Inc.//DTD JavaServer Faces Config 1.0//EN"

"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">

<faces-config>

<managed-bean>

<managed-bean-name>tableBean</managed-bean-name>

<managed-bean-class>

onlyfun.caterpillar.TableBean

</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

<managed-bean>

<managed-bean-name>userBean</managed-bean-name>

<managed-bean-class>

onlyfun.caterpillar.UserBean

</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

</faces-config>

　　我們可以如下使用<h:dataTable>來產生表格資料：

index.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>

<body>

<f:view>

<h:dataTable value="#{tableBean.userList}" var="user">

<h:column>

<h:outputText value="#{user.name}"/>

</h:column>

<h:column>

<h:outputText value="#{user.password}"/>

</h:column>

</h:dataTable>

</f:view>

</body>

</html>

　　<h:dataTable>的value值綁定tableBean的userList方法，它會一個一個取出 List中的資料並設定給var設定的user，之後在每一個column中我們可以顯示所列舉出的user.name與user.password，程式的結果會如下所示：

　　所產生的HTML表格標籤如下：

<table>

<tbody>

<tr>

<td>caterpillar</td>

</tr>

<tr>

<td>momor</td>

</tr>

<tr>

<td>becky</td>

</tr>

</tbody>

</table>

　　<h:dataTable>的value值綁定的對象可以是以下的型態：

陣列
java.util.List的實例
java.sql.ResultSet的實例
javax.servlet.jsp.jstl.sql.Result的實例
javax.faces.model.DataModel的實例

表头, 表尾

<h:dataTable>配合<h:column>来以表格的方式显示数据，< h:column>中只能包括 JSF组件或者是<f:facet>，JSF支援两种facet：header与footer。分别用以设定表格的表头与表尾文字，一个设定的例子如下：

<h:dataTable value="#{tableBean.userList}" var="user">

<h:column>

<f:facet name="header">

<h:outputText value="Name"/>

</f:facet>

<h:outputText value="#{user.name}"/>

<f:facet name="footer">

<h:outputText value="****"/>

</f:facet>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="Password"/>

</f:facet>

<h:outputText value="#{user.password}"/>

<f:facet name="footer">

<h:outputText value="****"/>

</f:facet>

</h:column>

</h:dataTable>

　　所产生的表格如下所示：

　　另外，对于表头、表尾仍至于每一行列，都可以分别设定CSS风格，例如下面这个styles.css摘录自Core JSF一书：

styles.css

.orders {

border: thin solid black;

}

.ordersHeader {

text-align: center;

font-style: italic;

color: Snow;

background: Teal;

}

.evenColumn {

height: 25px;

text-align: center;

background: MediumTurquoise;

}

.oddColumn {

text-align: center;

background: PowderBlue;

}

　　可以在我们的页面中如下加入：

....

....

<h:dataTable value="#{tableBean.userList}" var="user"

styleClass="orders"

headerClass="ordersHeader"

rowClasses="evenColumn,oddColumn">

<h:column>

<f:facet name="header">

<h:outputText value="Name"/>

</f:facet>

<h:outputText value="#{user.name}"/>

<f:facet name="footer">

<h:outputText value="****"/>

</f:facet>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="Password"/>

</f:facet>

<h:outputText value="#{user.password}"/>

<f:facet name="footer">

<h:outputText value="****"/>

</f:facet>

</h:column>

</h:dataTable>

　　则显示的表格结果如下：

TableModel 类别

在簡單的表格中曾經提過，<h:dataTable>可以列舉以下幾種型態的資料：

陣列
java.util.List的實例
java.sql.ResultSet的實例
javax.servlet.jsp.jstl.sql.Result的實例
javax.faces.model.DataModel的實例

　　對於前四種型態，JSF實際上是以javax.faces.model.DataModel加以包裝，DataModel是個抽象類別，其子類別都是位於 javax.faces.model這個package下：

ArrayDataModel
ListDataModel
ResultDataModel
ResultSetDataModel
ScalarDataModel

　　如果您想要對表格資料有更多的控制，您可以直接使用DataModel來設定表格資料，呼叫DataModel的setWrappedObject()方法可以讓您設定對應型態的資料，呼叫getWrappedObject()則可以取回資料，例如：

TableBean.java

package onlyfun.caterpillar;

import java.util.*;

import javax.faces.model.DataModel;

import javax.faces.model.ListDataModel;

public class TableBean {

private DataModel model;

private int rowIndex = -1;

public DataModel getUsers() {

if(model == null) {

model = new ListDataModel();

model.setWrappedData(getUserList());

}

return model;

}

private List getUserList() {

List userList = new ArrayList();

userList.add(new UserBean("caterpillar", "123456"));

userList.add(new UserBean("momor", "654321"));

userList.add(new UserBean("becky", "7890"));

return userList;

}

public int getSelectedRowIndex() {

return rowIndex;

}

public String select() {

rowIndex = model.getRowIndex();

return "success";

}

　　在這個Bean中，我們直接設定DataModel?，將userList設定給它，如您所看到的，我們還可以取得DataModel?的各個變項，在這個例子中，select()將作為點選表格之後的事件處理方法，我們可以藉由DataModel?的getRowIndex ()來取得所點選的是哪一row的資料，例如：

index.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>

<body>

<f:view>

<h:form>

<h:dataTable value="#{tableBean.users}" var="user"

styleClass="orders"

headerClass="ordersHeader"

rowClasses="evenColumn,oddColumn">

<h:column>

<f:facet name="header">

<h:outputText value="Name"/>

</f:facet>

<h:commandLink action="#{tableBean.select}">

<h:outputText value="#{user.name}"/>

</h:commandLink>

<f:facet name="footer">

<h:outputText value="****"/>

</f:facet>

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="Password"/>

</f:facet>

<h:outputText value="#{user.password}"/>

<f:facet name="footer">

<h:outputText value="****"/>

</f:facet>

</h:column>

</h:dataTable>

</h:form>

Selected Row: <h:outputText

value="#{tableBean.selectedRowIndex}"/>

</f:view>

</body>

</html>

　　DataModel的rowIndex是從0開始計算，當處理ActionEvent時，JSF會逐次遞增rowIndex的值，這讓您可以得知目前正在處理的是哪一個row的資料，一個執行的圖示如下：