(1)itcast.cn.domain目錄下存放的是employee.java,該程序是一個(gè)域?qū)ο笈c數(shù)據(jù)庫(kù)中表employee相對(duì)應(yīng)。
(2)itcast.cn.dao目錄下存放的是EmployeeDao.java,該程序是一個(gè)接口負(fù)責(zé)定義操作數(shù)據(jù)庫(kù)的CRUD方法。
(3)itcast.cn.dao.imp目錄下存放的是接口EmployeeDao的實(shí)現(xiàn)類EmployeeDaoImp,該實(shí)現(xiàn)類負(fù)責(zé)從數(shù)據(jù)表employee中讀取所有的記錄。
(4)itcast.cn.dao.service目錄下存放的是一個(gè)Servlet,負(fù)責(zé)把查詢出來(lái)的結(jié)果集存放到request域中,并控制頁(yè)面的跳轉(zhuǎn)。
(5)images目錄下存放顯示頁(yè)面所要用到的圖片
(6)styles目錄下存放的是css樣式表
2. 把eXtremeComponents-1.0.1-with-dependencies.zip解壓包中的dist目錄和lib/minimum目錄
下的jar包拷貝到該應(yīng)用程序的WEB-INF/lib目錄下,把images目錄下的圖片拷貝到該應(yīng)
用程序下的images文件夾下面,把dist目錄下的css樣式表拷貝到該應(yīng)用程序的styles目
錄下面。
3. 通過(guò)以上兩步使用eXtremeComponents的環(huán)境基本上已經(jīng)搭建好了,接下來(lái)就是具體的編
碼,為了減少篇幅,簡(jiǎn)單的代碼就不給列出來(lái)了,相信大家都會(huì)寫。
(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,該文件負(fù)責(zé)創(chuàng)建數(shù)據(jù)源,存放到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 {
//初始化一個(gè)InitialContext對(duì)象
initCtx = new InitialContext();
//利用JNDI的名稱得到數(shù)據(jù)源對(duì)象
DataSource ds = (DataSource) initCtx
.lookup("java:comp/env/jdbc/pagertest");
/* JdbcTemplate是Spring中的一個(gè)類,是對(duì)JDBC的一種封裝,抽象出我們常用的方法。
*/
JdbcTemplate jdbctemplate = new JdbcTemplate(ds);
list = jdbctemplate.query("select * from employee",
new RowMapper() {
/*@ResultSet rs結(jié)果集,rnum當(dāng)前行號(hào)*/
public Object mapRow(ResultSet rs, int rnum)
throws SQLException {
//---------判斷結(jié)果集的游標(biāo)是否指向第一行之前
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();
}
& nbsp; 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);
// 請(qǐng)求轉(zhuǎn)發(fā)到test.jsp頁(yè)面
request.getRequestDispatcher("/test.jsp").forward(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
(5)test.jsp,利用eXtremeComponents的標(biāo)簽庫(kù)把查詢出來(lái)的結(jié)果集以表格的形式顯示出來(lái)
例程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 的標(biāo)簽庫(kù)-->
<
%@taglib uri="
<!--引入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="員工編號(hào)">
${employee.emp_no}
</ec:column>
<ec:column property="emp_name" alias="員工姓名"/>
<ec:column property="emp_sex" alias="性別"/>
<ec:column property="dep_no" alias="部門編號(hào)"/>
<ec:column property="phone" alias="聯(lián)系電話"/>
</ec:row>
</ec:table>
說(shuō)明:
(1)上面代碼中的extremecomponents.css如果不引入仍然可以顯示分頁(yè)的效果,但是不會(huì)出現(xiàn)奇偶換行和高亮的效果。
(2)<ec:table>顯示表格,其中的items屬性用來(lái)設(shè)值存放在request域中的集合對(duì)象的名稱。var屬性:eXtremeTable使用var屬性將當(dāng)前行對(duì)應(yīng)的bean從集合傳到page范圍,因此你可以從page范圍中重新得到這些數(shù)據(jù)進(jìn)行操作。tableId用來(lái)唯一標(biāo)識(shí)表,如果在JSP頁(yè)面里包含兩個(gè)或兩個(gè)以上的表時(shí)需要設(shè)置它,該例子沒(méi)有用到。action被用來(lái)告訴eXtremeTable當(dāng)過(guò)濾或排序時(shí)如何回到當(dāng)前的頁(yè)面,本例中是通過(guò)EmployeeServlet來(lái)獲得所有記錄的集合。imagePath屬性是用來(lái)顯示圖片的,以上這幾個(gè)屬性都是必須的。rowsDisplayed是用來(lái)設(shè)置每一頁(yè)顯示的記錄條數(shù),如果不指定的話會(huì)使用默認(rèn)的。width和title屬性分別用來(lái)指定表格的寬度和標(biāo)題,是可選的。另外還有一個(gè)屬性tableId用來(lái)唯一標(biāo)識(shí)表,如果在JSP頁(yè)面里包含兩個(gè)或兩個(gè)以上的表時(shí)需要設(shè)置它。
(3)<ec:row>表示一行,其中highlightRow表示是否顯示高亮,如果屬性值為true表示顯示,否則不顯示。<ec:column>表示列,property屬性值對(duì)應(yīng)前面定義的域?qū)ο骵mployee中的屬性,alials為列起一個(gè)別名。
4. 把整個(gè)pagination工程發(fā)部到tomcat的webapps下面,啟動(dòng)tomcat后在瀏覽器的地址欄中輸入:http: //localhost:8080/pagination/servlet/EmployeeServlet,將會(huì)看到如下所示的顯示效果:
圖 4-1
點(diǎn)擊上面的next圖標(biāo),在瀏覽器中將會(huì)看到如下結(jié)果:
圖 4-2
同樣點(diǎn)擊Last圖標(biāo)將會(huì)看到最后幾條記錄。
5. 從上面運(yùn)行的結(jié)果可知每一頁(yè)顯示的是5條記錄,你也可以從右上角的下拉列表框中選擇其它的記錄條數(shù),假如你選擇的是10將會(huì)看到如下的結(jié)果:
圖 4-3
如果你想要修改下拉列表框中的值,只需在src的根目錄下添加一個(gè)屬性文件extremecomponents.properties(名字可以是任意的)并設(shè)置相應(yīng)的屬性,代碼如下:
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>
當(dāng)然也可以直接在extremetable.properties中修改,但是仍需在web.xml中指定。
【注】如果在屬性文件和jsp頁(yè)面同時(shí)設(shè)置了rowsDisplayed屬性,會(huì)以jsp頁(yè)面的為主。
注意:一定要合理的使用alias ,title和property屬性,如果使用不當(dāng)就會(huì)影響頁(yè)面的顯示效果,一般會(huì)遇到下列情況:
(1)如果是通過(guò)<ec:column property=" emp_name "/>來(lái)顯示從數(shù)據(jù)庫(kù)中查詢出一列的值則" emp_name "必須是表映射的實(shí)體中定義的屬性,如果采用如<ec:column property="user" >${employee. emp_name }</ec:column>這種形式時(shí),property屬性的值可以任意指定。當(dāng)然也可以用alias取別名代替但不可以僅僅用title來(lái)代替。如果使用<ec:column title=" emp_name ">${employee. emp_name }</ec:column>就會(huì)拋出java.lang.NullPointerException。
(2)如果是使用<ec:column alias=" emp_name "/>則不能顯示該列的數(shù)據(jù),也就是說(shuō)如果不使用EL表達(dá)式的形式來(lái)顯示數(shù)據(jù),那么就必須使用property屬性且屬性值必需是表映射的實(shí)體中定義的屬性。
(3)如果三者同時(shí)使用優(yōu)先級(jí)為title>alias>property,也就是說(shuō)如果同時(shí)使用時(shí)以title設(shè)置的屬性值為準(zhǔn),其次是alias,然后是property. 屬性名相同時(shí)要制定alias。
4.2 排序功能
eXtremeTable除了具有分頁(yè)功能之外還內(nèi)嵌了過(guò)濾和排序功能,你只需要決定是否使用他們。接下來(lái)我們就利用上面的例子來(lái)看一下它的排序功能。
1. 默認(rèn)情況下所有列的sortable 的屬性值都為true,我們只需把前面例子中的test.jsp中的alias屬性去掉,這時(shí)在瀏覽器地址欄中訪問(wèn)可以看到和上面一樣的效果,然后點(diǎn)擊任意列的名稱可以看到一個(gè)三角符號(hào),三角朝上表示是升序,朝下則表示是降序,例如點(diǎn)擊部門編號(hào)這一列便可看到如下的結(jié)果:
圖 4-4
但是注意:在排序時(shí)會(huì)遇到下列問(wèn)題
(1)如果使用<ec:column alias="name">${employee. emp_name }</ec:column>時(shí)點(diǎn)擊該列進(jìn)行排序時(shí)就會(huì)在瀏覽器的狀態(tài)欄下面出現(xiàn)一個(gè)警告的圖標(biāo),從而導(dǎo)致不能正確的實(shí)現(xiàn)排序功能。
這時(shí)只需把a(bǔ)lias的值改為”emp_name”(對(duì)應(yīng)實(shí)體的屬性)便可。
(2)使用<ec:column property="name">${ employee. emp_name }</ec:column>和使用<ec:column property="name" alias=" emp_name ">${ employee. emp_name }</ec:column> 同(1)一樣,需把property的屬性值設(shè)置為emp_name便可。這說(shuō)明如果想使用eXtremeTable 的排序功能就必須設(shè)置property的屬性值為對(duì)應(yīng)的屬性名,這也是前面為何要去掉alias的原因之一,查看源代碼就會(huì)發(fā)現(xiàn)eXtremeTable 的排序是和property屬性相關(guān)聯(lián)的,另外eXtremeTable對(duì)中文不是很好的支持(這也是eXtremeTable的缺陷之一),如果把前面的alias的屬性值改為英文則可以看到正常的效果。
2. 如果不想使用排序功能只需把標(biāo)簽<ec:table>中的sortable的屬性值設(shè)置為false便可;如果僅僅想指定某一列不用排序,那么只需在<ec:column>中把sortable的屬性值設(shè)置為false便可。
4.3 過(guò)濾功能
eXtremeTable的過(guò)濾功能就相當(dāng)與一個(gè)條件查詢,只顯示滿足條件的,過(guò)濾掉不滿足條件的。默認(rèn)情況下所有列均可過(guò)濾。
1. 使用過(guò)濾功能
緊接上面的例子。例如在test.jsp的頁(yè)面中的Dep_no列上面的文本框中輸入一個(gè)編號(hào),然后點(diǎn)擊右上角的filter,可以看到如下的結(jié)果:
圖 4-6
你會(huì)發(fā)現(xiàn)并不是我們預(yù)期的結(jié)果,我們?cè)局皇窍腼@示部門號(hào)為1的員工的信息。可見eXtremeTable在實(shí)現(xiàn)過(guò)濾時(shí),類似SQL語(yǔ)言中的模糊查詢。我認(rèn)為這個(gè)過(guò)濾沒(méi)有太大的意義。感興趣的話可以自己查看源代碼去擴(kuò)展它的過(guò)濾功能使之更清晰,更人性化一點(diǎn)。點(diǎn)擊clear圖標(biāo)就可清除過(guò)濾條件并顯示
最初的結(jié)果。
2. 不使用過(guò)濾功能
如果你不想使用eXtremeTable的過(guò)濾功能,只需在tabel標(biāo)簽中加入filterable="false" 便可。例如在<ec:column property=" emp_name "/>中設(shè)置filterable="false"則該列上面的文本框就會(huì)被隱藏,即不能輸入過(guò)濾條件進(jìn)行過(guò)濾。
4.4 導(dǎo)出功能
eXtremeTable默認(rèn)支持xls,pdf,csv格式的文件,也可自定義導(dǎo)出格式。如果想使用eXtremeTable的導(dǎo)出功能導(dǎo)出excel文件,在前面例子的基礎(chǔ)上還需要以下幾步的操作:
(1)首先把壓縮包中l(wèi)ib/xls目錄下的jar包放入WEB-INF/lib目錄下
(2)在web.xml中注冊(cè)一個(gè)過(guò)濾器,代碼如下:
<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)在瀏覽器的地址欄中重新訪問(wèn)http://localhost:8080/pagination/servlet/EmployeeServlet,可以看到如下結(jié)果:
圖 4-8
頁(yè)面上多了一個(gè)Expert XLS圖標(biāo),點(diǎn)擊右上角的導(dǎo)出圖標(biāo)可以彈出如下所示的窗口:
然后點(diǎn)擊保存按鈕便可以把所有記錄導(dǎo)入到employees.xls文件中。同樣如果想導(dǎo)出pdf格式
的文件只需使用<ec:exportPdf/>便可。
注意:前面已經(jīng)提到過(guò)alias,title和property三者之間的關(guān)系,如果使用不當(dāng)導(dǎo)出的文件內(nèi)容也會(huì)出現(xiàn)問(wèn)題。例如如果使用<ec:column alias=” emp_name”>${employee. emp_name }</ec:column>或者<ec:column property=”name”>${ employee.emp_name }
</ec:column>導(dǎo)出的excel文件內(nèi)容如下:
可以看到員工姓名這一列沒(méi)有內(nèi)容,查看源代碼就會(huì)發(fā)現(xiàn)只需改為<ec:column property=”emp_name”/>便可。
4.5 允許和不允許視圖
默認(rèn)情況下只要在標(biāo)簽<ec:column>中指定了正確的屬性該列就會(huì)導(dǎo)出到指定的視圖中。但是在實(shí)際的應(yīng)用中可能只需導(dǎo)出其中的某些列,這時(shí)就需要設(shè)置viewsDenied或viewsAllowed的屬性值來(lái)制定類允許和不允許使用的視圖(html、pdf、xls、csv,以及任何定制的視圖)。當(dāng)然也可以通過(guò)控制后臺(tái)程序來(lái)實(shí)現(xiàn)。
(1)不允許視圖
例如:
導(dǎo)出的excel文件中沒(méi)有必要含有性別這一列的內(nèi)容,也即不允許excel導(dǎo)出時(shí),只需設(shè)置viewsDenied便可。如下:
<ec:column alias=” emp_sex” viewsDenied=” xls”>
同樣對(duì)于其它格式的文件(html、pdf、xls、csv,等)也是類似的操作,如果指定多個(gè)視圖則該列不能應(yīng)用于指定的視圖。
(2)允許視圖
指定列允許使用的視圖只需設(shè)置屬性viewsAllowed便可。viewsAllowed與viewsDenied正好相反,但是可以得到同樣的效果。
5. eXtremeTable的擴(kuò)展
5.1擴(kuò)展屬性
大多數(shù)標(biāo)簽包含一系列的固定屬性,這樣那些已經(jīng)實(shí)現(xiàn)的功能能夠被使用。然而,eXtremeTable具有一種更具彈性的架構(gòu),可以添加自己的標(biāo)簽屬性實(shí)現(xiàn)更多的定制工作。此外,eXtremeTable提供了非常清晰的鉤子(hooks)允許你得到那些定制的標(biāo)簽屬性來(lái)做一些你需要的工作。
1.?dāng)U展TableTag
擴(kuò)展TableTag,只需覆蓋addExtendedAttributes()方法,然后添加自己的屬性到表對(duì)象中。
一個(gè)定制的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");
}
}
另外,你也可以定制自己的標(biāo)簽和自己的TLD文件。不需要修改extremecomponents.tld文件,就能像使用eXtremeTable里的標(biāo)簽一樣使用自己的標(biāo)簽。假如標(biāo)簽參照為mycompany 并且標(biāo)簽為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.?dāng)U展ColumnTag
你需要做的就是覆蓋addExtendedAttributes()方法,然后添加自己的屬性到列對(duì)象中。
一個(gè)定制的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對(duì)象,現(xiàn)在可以像下例一樣來(lái)定制cell:
public class MyCustomCell implements Cell {
public String getHtmlDisplay(TableModel model, Column column) {
Object customAttributeOne = column.getAttribute("customAttributeOne")
String customAttributeOne = column.getAttributeAsString("customAttributeOne")
}
}
另外,也可以定制自己的標(biāo)簽和自己的TLD文件。你不需要修改extremecomponents.tld文件,能像使用eXtremeTable里的標(biāo)簽一樣使用自己的標(biāo)簽,除了使用自己標(biāo)簽的參照。假如你的標(biāo)簽參照為mycompany 并且標(biāo)簽為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.?dāng)U展RowTag
擴(kuò)展RowTag和上面一樣也是覆蓋addExtendedAttributes()方法,只是傳入的參數(shù)需改為Row對(duì)象。
5.2 自定義html視圖
eXtremeTable使用View接口來(lái)生成HTML。你可以使用發(fā)行包已經(jīng)提供的視圖,或者你可以插入自己的視圖實(shí)現(xiàn)。如果要定義自己的視圖只需實(shí)現(xiàn)View接口,擴(kuò)展AbstractHtmlView類便可。
一個(gè)改變eXtremeTable工具條的實(shí)例:(定義兩個(gè)類)
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();
//在工具條里面添加一個(gè)文本框以便手動(dòng)的控制頁(yè)面顯示的行數(shù)
/* 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>中添加一個(gè)屬性view=”MyView的完整類名”,運(yùn)行效果如下:
5.3 為表格添加操作
在實(shí)際應(yīng)用,特別是在一些管理系統(tǒng)中前臺(tái)頁(yè)面往往查看信息與編輯、刪除都放在一起。對(duì)于eXtremeTable達(dá)到這樣的效果只需在jsp文件中(自定義一列)如下:
<ec:column alias="操作" filterable="false" sortable="false" >
<a href="${pageContext.request.contextPath}/servlet/EmployeeServlet?param=edit&id=${employee.id}">編輯</a>
<!--使用圖片的好處就是可以避免國(guó)際化的問(wèn)題-->
<a onclick="confirm('真的刪除');" ><img border="0" src ="${pageContext.request.contextPath}/images/delete.jpg"></a>
</ec:column>
具體功能的實(shí)現(xiàn)就需要我們自己去編寫href指定的類去處理,可以看到如下的結(jié)果:
6. 使用Limit
默認(rèn)的情況下eXtremeTable取得所有的結(jié)果集然后處理Beans集合,我們只需要組裝Beans集合并讓eXtremeTable知道如何引用它,這樣的好處是可以隨意進(jìn)行排序、過(guò)濾和分頁(yè)操作。對(duì)于小到中等數(shù)據(jù)量的結(jié)果集非常有效,當(dāng)結(jié)果集很大時(shí)這將非常糟糕。所以需要我們自己手動(dòng)來(lái)處理分頁(yè),這意味著一次只想取得一頁(yè)顯示需要的結(jié)果集。同時(shí),需要自己處理排序、過(guò)濾和分頁(yè)。這時(shí)應(yīng)該考慮使用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.htm