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)在頁面用TableTag設定什麼被顯示而且如何進行顯示。默認的eXtremeTable在servlet範圍(按照page,request, session,applicaton的順序)尋找具備名稱和items屬性設置相同的Beans集合。表將遍歷全部列,它使用var屬性將當前行對應的bean從集合傳到page範圍,所以你能夠從page範圍中從新獲得這些數據進行操做。
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屬性:eXtremeTable使用var屬性將當前行對應的bean從集合傳到page範圍,所以你能夠從page範圍中從新獲得這些數據進行操做。tableId用來惟一標識表,若是在JSP頁面裏包含兩個或兩個以上的表時須要設置它,該例子沒有用到。action被用來告訴eXtremeTable當過濾或排序時如何回到當前的頁面,本例中是經過EmployeeServlet來得到全部記錄的集合。imagePath屬性是用來顯示圖片的,以上這幾個屬性都是必須的。rowsDisplayed是用來設置每一頁顯示的記錄條數,若是不指定的話會使用默認的。width和title屬性分別用來指定表格的寬度和標題,是可選的。另外還有一個屬性tableId用來惟一標識表,若是在JSP頁面裏包含兩個或兩個以上的表時須要設置它。
(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(名字能夠是任意的)並設置相應的屬性,代碼以下:
table.rowsDisplayed=8
table.medianRowsDisplayed=10
table.maxRowsDisplayed=12
而後在web.xml中指定,代碼以下:
<context-param>
<param-name>extremecomponentsPreferencesLocation</param-name>
<param-value>/extremecomponents.properties</param-value>
</context-param>
固然也能夠直接在extremetable.properties中修改,可是仍需在web.xml中指定。
【注】若是在屬性文件和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。
4.2 排序功能
eXtremeTable除了具備分頁功能以外還內嵌了過濾和排序功能,你只須要決定是否使用他們。接下來咱們就利用上面的例子來看一下它的排序功能。
1. 默認狀況下全部列的sortable 的屬性值都爲true,咱們只需把前面例子中的test.jsp中的alias屬性去掉,這時在瀏覽器地址欄中訪問能夠看到和上面同樣的效果,而後點擊任意列的名稱能夠看到一個三角符號,三角朝上表示是升序,朝下則表示是降序,例如點擊部門編號這一列即可看到以下的結果:
圖 4-4
可是注意:在排序時會遇到下列問題
(1)若是使用<ec:column alias="name">${employee. emp_name }</ec:column>時點擊該列進行排序時就會在瀏覽器的狀態欄下面出現一個警告的圖標,從而致使不能正確的實現排序功能。
這時只需把alias的值改成」emp_name」(對應實體的屬性)即可。
(2)使用<ec:column property="name">${ employee. emp_name }</ec:column>和使用<ec:column property="name" alias=" emp_name ">${ employee. emp_name }</ec:column> 同(1)同樣,需把property的屬性值設置爲emp_name即可。這說明若是想使用eXtremeTable 的排序功能就必須設置property的屬性值爲對應的屬性名,這也是前面爲什麼要去掉alias的緣由之一,查看源代碼就會發現eXtremeTable 的排序是和property屬性相關聯的,另外eXtremeTable對中文不是很好的支持(這也是eXtremeTable的缺陷之一),若是把前面的alias的屬性值改成英文則能夠看到正常的效果。
2. 若是不想使用排序功能只需把標籤<ec:table>中的sortable的屬性值設置爲false即可;若是僅僅想指定某一列不用排序,那麼只需在<ec:column>中把sortable的屬性值設置爲false即可。
4.3 過濾功能
eXtremeTable的過濾功能就至關與一個條件查詢,只顯示知足條件的,過濾掉不知足條件的。默認狀況下全部列都可過濾。
1. 使用過濾功能
緊接上面的例子。例如在test.jsp的頁面中的Dep_no列上面的文本框中輸入一個編號,而後點擊右上角的filter,能夠看到以下的結果:
圖 4-6
你會發現並非咱們預期的結果,咱們本來只是想顯示部門號爲1的員工的信息。可見eXtremeTable在實現過濾時,相似SQL語言中的模糊查詢。我認爲這個過濾沒有太大的意義。感興趣的話能夠本身查看源代碼去擴展它的過濾功能使之更清晰,更人性化一點。點擊clear圖標就可清除過濾條件並顯示最初的結果。
2. 不使用過濾功能
若是你不想使用eXtremeTable的過濾功能,只需在tabel標籤中加入filterable="false" 即可。例如在<ec:column property=" emp_name "/>中設置filterable="false"則該列上面的文本框就會被隱藏,即不能輸入過濾條件進行過濾。
4.4 導出功能
eXtremeTable默認支持xls,pdf,csv格式的文件,也可自定義導出格式。若是想使用eXtremeTable的導出功能導出excel文件,在前面例子的基礎上還須要如下幾步的操做:
(1)首先把壓縮包中lib/xls目錄下的jar包放入WEB-INF/lib目錄下
(2)在web.xml中註冊一個過濾器,代碼以下:
<filter>
<filter-name>eXtremeExport</filter-name>
<filter-class>
org.extremecomponents.table.filter.ExportFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>eXtremeExport</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
(3)在test.jsp中加入下面一行代碼以下:
<ec:exportXls fileName="presidents.xls" tooltip="Export Excel"/>
(4)在瀏覽器的地址欄中從新訪問http://localhost:8080/pagination/servlet/EmployeeServlet,能夠看到以下結果:
圖 4-8
頁面上多了一個Expert XLS圖標,點擊右上角的導出圖標能夠彈出以下所示的窗口:
而後點擊保存按鈕即可以把全部記錄導入到employees.xls文件中。一樣若是想導出pdf格式
的文件只需使用<ec:exportPdf/>即可。
注意:前面已經提到過alias,title和property三者之間的關係,若是使用不當導出的文件內容也會出現問題。例如若是使用<ec:column alias=」 emp_name」>${employee. emp_name }</ec:column>或者<ec:column property=」name」>${ employee.emp_name }
</ec:column>導出的excel文件內容以下:
能夠看到員工姓名這一列沒有內容,查看源代碼就會發現只需改成<ec:column property=」emp_name」/>即可。
4.5 容許和不容許視圖
默認狀況下只要在標籤<ec:column>中指定了正確的屬性該列就會導出到指定的視圖中。可是在實際的應用中可能只需導出其中的某些列,這時就須要設置viewsDenied或viewsAllowed的屬性值來制定類容許和不容許使用的視圖(html、pdf、xls、csv,以及任何定製的視圖)。固然也能夠經過控制後臺程序來實現。
(1)不容許視圖
例如:
導出的excel文件中沒有必要含有性別這一列的內容,也即不容許excel導出時,只需設置viewsDenied即可。以下:
<ec:column alias=」 emp_sex」 viewsDenied=」 xls」>
一樣對於其它格式的文件(html、pdf、xls、csv,等)也是相似的操做,若是指定多個視圖則該列不能應用於指定的視圖。
(2)容許視圖
指定列容許使用的視圖只需設置屬性viewsAllowed即可。viewsAllowed與viewsDenied正好相反,可是能夠獲得一樣的效果。
5. eXtremeTable的擴展
5.1擴展屬性
大多數標籤包含一系列的固定屬性,這樣那些已經實現的功能可以被使用。然而,eXtremeTable具備一種更具彈性的架構,能夠添加本身的標籤屬性實現更多的定製工做。此外,eXtremeTable提供了很是清晰的鉤子(hooks)容許你獲得那些定製的標籤屬性來作一些你須要的工做。
1.擴展TableTag
擴展TableTag,只需覆蓋addExtendedAttributes()方法,而後添加本身的屬性到表對象中。
一個定製的TreeTag示例以下:
public class TreeTag extends TableTag {
private String parentAttribute;
private String identifier;
public void setParentAttribute(String parentAttribute) {
this.parentAttribute = parentAttribute;
}
public void setIdentifier(String identifier) {
this.identifier = identifier;
}
public void addExtendedAttributes(Table table) {
table.addAttribute(TableConstants.PARENT_ATTRIBUTE, TagUtils.evaluateExpressionAsString("parentAttribute",parentAttribute, this,pageContext));
table.addAttribute(TableConstants.IDENTIFIER, TagUtils.evaluateExpressionAsString("identifier",
identifier, this, pageContext));
table.setFilterRowsCallback("org.extremecomponents.tree.ProcessTreeRowsCallback");
table.setSortRowsCallback("org.extremecomponents.tree.ProcessTreeRowsCallback");
}
}
另外,你也能夠定製本身的標籤和本身的TLD文件。不須要修改extremecomponents.tld文件,就能像使用eXtremeTable裏的標籤同樣使用本身的標籤。假如標籤參照爲mycompany 而且標籤爲customTable,就能夠像下面同樣使用他們:
<mycompany:customTable
items="presidents"
action="${pageContext.request.contextPath}/public/demo/presidents.jsp"
title="Presidents"
>
<ec:row>
<ec:column property="nickName"/>
</ec:row>
</mycompany:customTable>
2.擴展ColumnTag
你須要作的就是覆蓋addExtendedAttributes()方法,而後添加本身的屬性到列對象中。
一個定製的CustomTag示例以下:
public class MyCustomTag extends ColumnTag {
private String customAttributeOne;
public String getCustomAttributeOne() {
return customAttributeOne;
}
public void setCustomAttributeOne(String customAttributeOne) {
this.customAttributeOne = customAttributeOne;
}
public void addExtendedAttributes(Column column) {
column.addAttribute("customAttributeOne", customAttributeOne);
}
}
添加了屬性值到Column對象,如今能夠像下例同樣來定製cell:
public class MyCustomCell implements Cell {
public String getHtmlDisplay(TableModel model, Column column) {
Object customAttributeOne = column.getAttribute("customAttributeOne")
String customAttributeOne = column.getAttributeAsString("customAttributeOne")
}
}
另外,也能夠定製本身的標籤和本身的TLD文件。你不須要修改extremecomponents.tld文件,能像使用eXtremeTable裏的標籤同樣使用本身的標籤,除了使用本身標籤的參照。假如你的標籤參照爲mycompany 而且標籤爲customColumn,能夠像下面同樣使用他們:
<ec:table
items="presidents"
action="${pageContext.request.contextPath}/public/demo/presidents.jsp"
title="Presidents"
>
<ec:row>
<mycompany:customColumn
property="hello"
cell="com.mycompany.cell.MyCustomCell"
customAttributeOne="Hello World"/>
</ec:row>
</ec:table>
3.擴展RowTag
擴展RowTag和上面同樣也是覆蓋addExtendedAttributes()方法,只是傳入的參數需改成Row對象。
5.2 自定義html視圖
eXtremeTable使用View接口來生成HTML。你可使用發行包已經提供的視圖,或者你能夠插入本身的視圖實現。若是要定義本身的視圖只需實現View接口,擴展AbstractHtmlView類即可。
一個改變eXtremeTable工具條的實例:(定義兩個類)
1.Mytoolbar.java
public class MyToolbar extends TwoColumnTableLayout {
public MyToolbar(HtmlBuilder html, TableModel model) {
super(html, model);
}
protected boolean showLayout(TableModel model) {
boolean showPagination = BuilderUtils.showPagination(model);
boolean showExports = BuilderUtils.showExports(model);
boolean showTitle = BuilderUtils.showTitle(model);
if (!showPagination && !showExports && !showTitle) {
return false;
}
return true;
}
protected void columnLeft(HtmlBuilder html, TableModel model) {
html.td(2).close();
new TableBuilder(html, model).title();
html.tdEnd();
}
protected void columnRight(HtmlBuilder html, TableModel model) {
boolean showPagination = BuilderUtils.showPagination(model);
boolean showExports = BuilderUtils.showExports(model);
ToolbarBuilder toolbarBuilder = new ToolbarBuilder(html, model);
html.td(2).align("right").close();
html.table(2).border("0").cellPadding("0").cellSpacing("1").styleClass(BuilderConstants.TOOLBAR_CSS).close();
html.tr(3).close();
if (showPagination) {
html.td(4).close();
toolbarBuilder.firstPageItemAsImage();
html.tdEnd();
html.td(4).close();
toolbarBuilder.prevPageItemAsImage();
html.tdEnd();
html.td(4).close();
toolbarBuilder.nextPageItemAsImage();
html.tdEnd();
html.td(4).close();
toolbarBuilder.lastPageItemAsImage();
html.tdEnd();
html.td(4).close();
toolbarBuilder.separator();
html.tdEnd();
html.td(4).close();
//在工具條裏面添加一個文本框以便手動的控制頁面顯示的行數
/* StringBuffer action = new StringBuffer("javascript:");
TableActions ta = new TableActions(model);
int currentRowsDisplayed = model.getLimit().getCurrentRowsDisplayed();
html.input("text").name(model.getTableHandler().prefixWithTableId() + TableConstants.ROWS_DISPLAYED).value(String.valueOf(currentRowsDisplayed);
action.append(ta.getClearedExportTableIdParameters());
String form = BuilderUtils.getForm(model);
action.append("document.forms.").append(form).append(".");
action.append(model.getTableHandler().prefixWithTableId()).append(TableConstants.CURRENT_ROWS_DISPLAYED);
action.append(".value=").append("this.value").append(";");
action.append(ta.getFormParameter(TableConstants.PAGE, "1"));
action.append("if(event.keyCode==13){");
action.append(ta.getOnInvokeAction());
action.append("}");
html.onkeypress(action.toString());
html.xclose();
html.tdEnd();*/
html.td(4).style("width:10px").close();
html.newline();
html.tabs(4);
toolbarBuilder.rowsDisplayedDroplist();
html.img();
html.src(BuilderUtils.getImage(model, BuilderConstants.TOOLBAR_ROWS_DISPLAYED_IMAGE));
html.style("border:0");
html.alt("Rows Displayed");
html.xclose();
html.tdEnd();
if (showExports) {
html.td(4).close();
toolbarBuilder.separator();
html.tdEnd();
}
}
if (showExports) {
Iterator iterator = model.getExportHandler().getExports().iterator();
for (Iterator iter = iterator; iter.hasNext();) {
html.td(4).close();
Export export = (Export) iter.next();
toolbarBuilder.exportItemAsImage(export);
html.tdEnd();
}
}
html.trEnd(3);
html.tableEnd(2);
html.newline();
html.tabs(2);
html.tdEnd();
}
}
2.MyView.java
public class MyView extends AbstractHtmlView {
protected void beforeBodyInternal(TableModel model) {
getTableBuilder().tableStart();
getTableBuilder().theadStart();
getTableBuilder().filterRow();
getTableBuilder().headerRow();
getTableBuilder().theadEnd();
getTableBuilder().tbodyStart();
}
protected void afterBodyInternal(TableModel model) {
getCalcBuilder().defaultCalcLayout();
getTableBuilder().tbodyEnd();
getTableBuilder().tableEnd();
toolbar(getHtmlBuilder(), getTableModel());
statusBar(getHtmlBuilder(), getTableModel());
}
protected void toolbar(HtmlBuilder html, TableModel model) {
new MyToolbar(html, model).layout();
}
protected void statusBar(HtmlBuilder html, TableModel model) {
new DefaultStatusBar(html, model).layout();
}
}
而後在<ec:table>中添加一個屬性view=」MyView的完整類名」,運行效果以下:
5.3 爲表格添加操做
在實際應用,特別是在一些管理系統中前臺頁面每每查看信息與編輯、刪除都放在一塊兒。對於eXtremeTable達到這樣的效果只需在jsp文件中(自定義一列)以下:
<ec:column alias="操做" filterable="false" sortable="false" >
<a href="${pageContext.request.contextPath}/servlet/EmployeeServlet?param=edit&id=${employee.id}">編輯</a>
<!--使用圖片的好處就是能夠避免國際化的問題-->
<a onclick="confirm('真的刪除');" ><img border="0" src ="${pageContext.request.contextPath}/images/delete.jpg"></a>
</ec:column>
具體功能的實現就須要咱們本身去編寫href指定的類去處理,能夠看到以下的結果:
6. 使用Limit
默認的狀況下eXtremeTable取得全部的結果集而後處理Beans集合,咱們只須要組裝Beans集合並讓eXtremeTable知道如何引用它,這樣的好處是能夠隨意進行排序、過濾和分頁操做。對於小到中等數據量的結果集很是有效,當結果集很大時這將很是糟糕。因此須要咱們本身手動來處理分頁,這意味着一次只想取得一頁顯示須要的結果集。同時,須要本身處理排序、過濾和分頁。這時應該考慮使用eXtremeTable的Limit特性。
具體使用能夠參考Limit指南:http://extremecomponents.org/wiki/index.php/Simplified_Chinese_Reference/Simplified_Chinese_Reference_Limit.htm和
http://extremecomponents.org/wiki/index.php/Simplified_Chinese_Reference/ Simplified_Chinese_Tutorials_Limit.htmjavascript