eXtremeTable這是之前韓老師講過的一個分頁組件，總結一下，供大家參考。看完這些基本上就可以架起eXtremeTable。有關eXtremeTable的其它應用，有時間再繼續。
上面提到利用extremecomponents.properties來設置每一頁顯示的記錄時，還需要在web.xml中配置一個全局的參數，代碼如下：
1.簡介
eXtremeTable是目前流行的優秀分頁組件之一，和 Displsytag，ValueList相比，即美觀又使用。在介紹eXtremeTable之前先了解一下eXtremeComponents,它是一系列的開源的jsp自定義標籤庫，eXtremeTable是它中的一個功能強大而又容易配置、擴展、自定義的組件。它是以表格的形式來顯示數據，具有分頁組件應具有的大部分功能,比如:設定每頁顯示的記錄數,排序等，除此之外它還具有過濾,導出,利用數據庫的limit功能局部取數據,自定義列樣式等等。eXtremeTable它不依賴任何框架和容器。
2.安裝和測試
2.1 下載
eXtremeTable的最新版本爲1.0.1，可以從它的官方網站http://www.extremecomponents.org下載最新版本，也可以從http://sourceforge.net/projects/extremecomp/下載.下載的壓縮包爲eXtremeComponents-1.0.1-with-dependencies.zip，解壓後的主要目錄如下所示：
（1）source：存放源文件
（2）lib：存放使用eXtremeTable一些功能所必需的jar包
（3）dist：使用eXtremeTable所必須的jar包和一些樣式表，tld文件和js腳本文件。
（4）images：存放用表格顯示數據時所用的圖片。
（5）test：存放一個測試eXtremeTable的一個jsp文件。
2.2 安裝
1．首先把必須的extremecomponents-1.0.1.jar放入WEB-INF/lib目錄下，然後根據需要把解壓包中lib目錄下的jar文件拷貝到WEB-INF/lib目錄下。尤其是minimum目錄下的jar包也必須放入WEB-INF/lib目錄下。
2．把css文件放到web應用的任意目錄。
3．把images中的圖片放到web應用的任意目錄。
4．在/source/org/extremecomponents/table/core目錄中找到extremetable.properties文件,把它複製到WEB-INF/classes裏面（類加載器可以加載的地方）並根據需要進行相應修改，當然也可以不使用該文件。
2.3 測試該標籤庫
按照上面的步驟下載並安裝後，我們就可以運行一個eXtremeTable例子。首先新建一個web工程並搭建好環境，然後寫一個jsp頁面來測試一下,代碼如下：（當然我們也可以利用eXtremeTable壓縮包中自帶的例子test.jsp來測試，同樣也可以看到效果）
|
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/styles/extremecomponents.css">
<%
List countries = new ArrayList();
for (int i = 1; i <= 10; i++)
{
Map cinfo = new java.util.HashMap();
cinfo.put("cno", "coutry"+i);
cinfo.put("cname", "國家"+i);
cinfo.put("area", "所在州"+i);
cinfo.put("born",new Date());
countries.add(cinfo);
}
request.setAttribute("cinfos", countries);
%>
<ec:table
items="cinfos"
action="${pageContext.request.contextPath}/index.jsp"
imagePath="${pageContext.request.contextPath}/images/table/*.gif"
cellpadding="1"
title="您好！這是eXtremeTable的一個測試例子">
<ec:row highlightRow="true">
<ec:column property="cno"/>
<ec:column property="cname"/>
<ec:column property="area"/>
<ec:column property="born" cell="date" format="yyyy-MM-dd"/>
</ec:row>
</ec:table>
|
把上面的工程部署到tomcat容器下，然後在瀏覽器地址欄裏面輸入：http://localhost:8080/pagination/index.jsp 瀏覽器顯示的結果如下圖所示：
圖 2-1
3.eXtremeTable分頁的原理
Extremecomponents默認從數據庫中查找所有記錄，如果結果集較大時，ec會使用Limit對象向Controller傳遞PageNo,PageSize,OrderBy等分頁信息。而服務器端將向ec返回總記錄數和當前頁的內容。具體實現：
（1）從數據庫獲取數據並保存到Collection中
（2）將Collection保存在session或者request變量中
（3）在頁面用taglib取出變量，遍歷該Collection使之顯示每條記錄
4. eXtremeTable的應用
4.1 分頁功能
分頁是web應用程序最常見的功能,也是一個web開發者必須掌握的技能之一，在目前的IT開發節奏下不需要自己從頭寫分頁功能,而是應該集成一個功能完善的分頁組件。下面我們通過一個例子來看一下如何使用eXtremeTable的分頁功能。
1. 首先構建一個web應用程序pagination,目錄結構如下：
（1）itcast.cn.domain目錄下存放的是employee.java，該程序是一個域對象與數據庫中表employee相對應。
（2）itcast.cn.dao目錄下存放的是EmployeeDao.java，該程序是一個接口負責定義操作數據庫的CRUD方法。
（3）itcast.cn.dao.imp目錄下存放的是接口EmployeeDao的實現類EmployeeDaoImp，該實現類負責從數據表employee中讀取所有的記錄。
（4）itcast.cn.dao.service目錄下存放的是一個Servlet,負責把查詢出來的結果集存放到request域中,並控制頁面的跳轉。
（5）images目錄下存放顯示頁面所要用到的圖片
（6）styles目錄下存放的是css樣式表
2. 把eXtremeComponents-1.0.1-with-dependencies.zip解壓包中的dist目錄和lib/minimum目錄
下的jar包拷貝到該應用程序的WEB-INF/lib目錄下，把images目錄下的圖片拷貝到該應
用程序下的images文件夾下面，把dist目錄下的css樣式表拷貝到該應用程序的styles目
錄下面。
3. 通過以上兩步使用eXtremeComponents的環境基本上已經搭建好了，接下來就是具體的編
碼，爲了減少篇幅，簡單的代碼就不給列出來了，相信大家都會寫。
（1）模型組件employee代碼如下：
例程4-1 employee.java
|
package itcast.cn.domain;
public class employee {
private int emp_no;
private String emp_name;
private String emp_sex;
private int dep_no;
private String phone;
public int getDep_no() {
return dep_no;
}
public void setDep_no(int dep_no) {
this.dep_no = dep_no;
}
public String getEmp_name() {
return emp_name;
}
public void setEmp_name(String emp_name) {
this.emp_name = emp_name;
}
public int getEmp_no() {
return emp_no;
}
public void setEmp_no(int emp_no) {
this.emp_no = emp_no;
}
public String getEmp_sex() {
return emp_sex;
}
public void setEmp_sex(String emp_sex) {
this.emp_sex = emp_sex;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}
|
（2）context.xml，該文件負責創建數據源，存放到META-INF目錄下，代碼如下：
例程4-2 context.xml
|
<Context debug="5" reloadable="true" crossContext="true">
<Resource name="jdbc/pagertest" auth="Container"
type="javax.sql.DataSource" username="root" password="wang"
driverClassName="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/pager?useUnicode=true&characterEncoding=utf-8"
maxActive="100" maxIdle="30" maxWait="10000" />
</Context>
|
（3）EmployeeDaoImp.java，代碼如下：
例程4-3 EmployeeDaoImp.java
|
package itcast.cn.dao.imp;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import itcast.cn.dao.EmployeeDao;
import itcast.cn.domain.employee;
public class EmployeeDaoImp implements EmployeeDao {
public List getemployees() {
Context initCtx = null;
List list = new ArrayList();
try {
//初始化一個InitialContext對象
initCtx = new InitialContext();
//利用JNDI的名稱得到數據源對象
DataSource ds = (DataSource) initCtx
.lookup("java:comp/env/jdbc/pagertest");
/* JdbcTemplate是Spring中的一個類，是對JDBC的一種封裝，抽象出我們常用的方法。
*/
JdbcTemplate jdbctemplate = new JdbcTemplate(ds);
list = jdbctemplate.query("select * from employee",
new RowMapper() {
/*@ResultSet rs結果集，rnum當前行號*/
public Object mapRow(ResultSet rs, int rnum)
throws SQLException {
//---------判斷結果集的遊標是否指向第一行之前
if (rnum < 0)
return null;
employee employee = new employee();
employee.setDep_no(rs.getInt(1));
employee.setEmp_name(rs.getString(2));
employee.setEmp_sex(rs.getString(3));
employee.setEmp_no(rs.getInt(4));
employee.setPhone(rs.getString(5));
return employee;
}
});
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return list;
}
}
|
（4）EmployeeServlet.java 代碼如下：
例程4-4 EmployeeServlet.java
|
package itcast.cn.service;
import itcast.cn.dao.imp.EmployeeDaoImp;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class EmployeeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
EmployeeDaoImp edao = new EmployeeDaoImp();
List employees = edao.getemployees();
// 把獲得的list集合存放到request域中
request.setAttribute("employees", employees);
// 請求轉發到test.jsp頁面
request.getRequestDispatcher("/test.jsp").forward(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
|
（5）test.jsp，利用eXtremeComponents的標籤庫把查詢出來的結果集以表格的形式顯示出來
例程4-5 test.jsp
|
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!--引入extremecomponents 的標籤庫-->
<%@taglib uri="http://www.extremecomponents.org" prefix="ec" %>
<!--引入extremecomponents 的樣式表-->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/styles/extremecomponents.css">
<ec:table
items="employees"
var="employee"
action="${pageContext.request.contextPath}/servlet/EmployeeServlet"
imagePath="${pageContext.request.contextPath}/images/table/*.gif"
rowsDisplayed="5"
width="700"
title="員工信息">
<ec:row highlightRow="true">
<ec:column property="emp_no" alias="員工編號">
${employee.emp_no}
</ec:column>
<ec:column property="emp_name" alias="員工姓名"/>
<ec:column property="emp_sex" alias="性別"/>
<ec:column property="dep_no" alias="部門編號"/>
<ec:column property="phone" alias="聯繫電話"/>
</ec:row>
</ec:table>
|
說明：
（1）上面代碼中的extremecomponents.css如果不引入仍然可以顯示分頁的效果，但是不會出現奇偶換行和高亮的效果。
（2）<ec:table>中items屬性用來設值存放在request域中的集合對象的名稱，var屬性值是集合對象的一個引用名稱，通過該屬性值可以獲得集合對象中的屬性值。action被用來告訴eXtremeTable當過濾或排序時如何回到當前的頁面,本例中是通過EmployeeServlet來獲得所有記錄的集合。imagePath屬性是用來顯示圖片的, 以上這幾個屬性都是必須的。rowsDisplayed是用來設置每一頁顯示的記錄條數，如果不指定的話會使用默認的。width和title屬性分別用來指定表格的寬度和標題，是可選的。
（3）<ec:row>表示一行，其中highlightRow表示是否顯示高亮，如果屬性值爲true表示顯示，否則不顯示。<ec:column>表示列，property屬性值對應前面定義的域對象employee中的屬性，alials爲列起一個別名。
4. 把整個pagination工程發部到tomcat的webapps下面，啓動tomcat後在瀏覽器的地址欄中輸入：http://localhost:8080/pagination/servlet/EmployeeServlet，將會看到如下所示的顯示效果：
圖 4-1
點擊上面的next圖標，在瀏覽器中將會看到如下結果：
圖 4-2
同樣點擊Last圖標將會看到最後幾條記錄。
5. 從上面運行的結果可知每一頁顯示的是5條記錄，你也可以從右上角的下拉列表框中選擇其它的記錄條數，假如你選擇的是10將會看到如下的結果：
圖 4-3
如果你想要修改下拉列表框中的值，只需在src的根目錄下添加一個屬性文件extremecomponents.properties,並設置相應的屬性便可，因爲eXtremeComponents會自動讀取該屬性文件。代碼如下：
table.rowsDisplayed=8
table.medianRowsDisplayed=10
table.maxRowsDisplayed=12
【注】如果在屬性文件和jsp頁面同時設置了rowsDisplayed屬性，會以jsp頁面的爲主。
注意：一定要合理的使用alias ,title和property屬性，如果使用不當就會影響頁面的顯示效果，一般會遇到下列情況：
（1）如果是通過<ec:column property=" emp_name "/>來顯示從數據庫中查詢出一列的值則" emp_name "必須是表映射的實體中定義的屬性，如果採用如<ec:column property="user" >${employee. emp_name }</ec:column>這種形式時，property屬性的值可以任意指定。當然也可以用alias取別名代替但不可以僅僅用title來代替。如果使用<ec:column title=" emp_name ">${employee. emp_name }</ec:column>就會拋出java.lang.NullPointerException。
（2）如果是使用<ec:column alias=" emp_name "/>則不能顯示該列的數據，也就是說如果不使用EL表達式的形式來顯示數據，那麼就必須使用property屬性且屬性值必需是表映射的實體中定義的屬性。
（3）如果三者同時使用優先級爲title>alias>property，也就是說如果同時使用時以title設置的屬性值爲準，其次是alias,然後是property. 屬性名相同時要制定alias。
eXtremeTable的中文參考文檔http://extremecomponents.org/wiki/index.php/Simplified_Chinese_Reference
<context-param>
<param-name>extremecomponentsPreferencesLocation</param-name>
<param-value>/extremecomponents.properties</param-value>
</context-param>
另：也可以直接在extremetable.properties中修改，而且該屬性文件的名字可以是任意的（前面例子中採用的名字是extremecomponents.properties，不是必須的），但是都需要在web.xml中指定。
