javascript
eXtremeComponents（简称ec）是一系列提供高级显示的开源JSP定制标签
1. 簡介
eXtremeComponents（簡稱ec）是一系列提供高級(jí)顯示的開源JSP定制標(biāo)簽，當(dāng)前的包含的組件為eXtremeTable，用于以表形式顯示數(shù)據(jù)。
使用ec需要一定的前提條件，JDK要求1.3或更高的版本，Servlet需要2.3或以上版本。
eXtremeTable在給定的servlet范圍（scope）外取得Beans或Maps的集合用于JSP頁面顯示。 servelet范圍的搜索順序是：page, request, session和application。通過設(shè)定TableTage的items屬性，eXtremeTable知道哪些需要在servlet范圍外被保持。
集合里的Beans是pojo，如果使用maps那么它就是鍵值對(duì)。你可以認(rèn)為每一個(gè)bean就是表中的一行數(shù)據(jù)。在接下來的文檔中，我將使用Beans集合來代替這兩種集合。
2. 下載與配置
2.1 下載
?????? 首頁：http://www.extremecomponents.org
?????? 下載地址：
http://sourceforge.net/project/showfiles.php?group_id=108168&package_id=116800
?????? 下載界面如圖1所示：
圖1?ec的下載界面
?????? 當(dāng)前ec的最新版為1.0.1正式版。其中eXtremeComponents-1.0.1.zip為不帶依賴包的壓縮包，其中包含ec發(fā)布的jar、js、tld和css文件，還包括其源碼。其目錄結(jié)構(gòu)如圖2所示：
圖2 eXtremeComponents-1.0.1.zip的目錄結(jié)構(gòu)?????圖3 dependencies壓縮包的目錄結(jié)構(gòu)
?????? eXtremeComponents-1.0.1-with-dependencies.zip除了包含eXtremeComponents-1.0.1.zip的內(nèi)容外，還包含一個(gè)lib目錄，用來存放依賴的jar包。lib下的minimum目錄為最小的jar要求，如下所示：
l????????commons-beanutils-1.7.0.jar
l????????commons-collections-3.0.jar
l????????commons-lang-2.0.jar
l????????commons-logging-1.0.4.jar
l????????standard-1.0.2.jar
lib下的pdf目錄為需要使用PDF導(dǎo)出功能時(shí)需要另外添加的jar包，如下所示：
l????????avalon-framework-4.0.jar
l????????batik-1.5-fop-0.20-5.jar
l????????fop-0.20.5.jar
l????????xalan-2.5.1.jar
l????????xercesImpl-2.6.1.jar
l????????xml-apis-2.0.2.jar
lib下的xls目錄為需要使用XLS導(dǎo)出功能時(shí)需要添加的jar包，該目錄下只有一個(gè)jar包，即：poi-2.5.1.jar。
2.2 配置
要在Web項(xiàng)目中使用ec來進(jìn)行分頁，需要做一些準(zhǔn)備工作。
建立名為extremecomponents的Web工程后，第一步需要dist目錄下的ec的jar包：extremecomponents-1.0.1.jar拷貝到Web工程的WebRoot/WEB-INF/lib目錄，并將相關(guān)的依賴包也拷貝到該目錄。
接著在WebRoot/WEB-INF目錄下建立tld目錄來存放tld文件，并將ec的tld文件extremecomponents.tld（在dist目錄下）拷貝到WEB-INF/tld目錄。
下一步是在WebRoot目錄下建立styles目錄，用來存放css樣式表文件，并將并將ec的css文件extremecomponents.css（在dist目錄下）拷貝到WEB-INF/styles目錄。
下一步是在WebRoot目錄下建立js目錄，用來存放js文件，并將并將ec的js文件extremecomponents.js（在dist目錄下）拷貝到WEB-INF/js目錄。
最后是拷貝圖片，將images（該目錄包括了ec所需的全部圖片）整個(gè)目錄拷貝到WebRoot目錄下即可。
3. 使用舉例
3.1 初級(jí)篇
3.1.1最簡語句實(shí)例
?????? 本例講解ec進(jìn)行分頁的一個(gè)最簡單的例子，在該例子中，顯示一個(gè)用戶列表，用戶列表中有若干User對(duì)象，每個(gè)User對(duì)象有loginName（用戶名）、name（姓名）、mobile（手機(jī)號(hào)）、address（地址）、email（Email）這五個(gè)屬性。
?????? 首先讀者需要在extremecomponents工程中引入Struts1.2。讀者可以在MyEclipse中選中該工程后，點(diǎn)擊右鍵選擇“MyEclipse”->“Add Struts Capabilities…”，彈出新建對(duì)話框，如圖4所示：
圖4??為工程導(dǎo)入Struts1.2的對(duì)話框
?????? 在“Struts specification”中選擇“Struts 1.2”，在“Base poackage for new classes”中不輸入內(nèi)容，使得資源文件放置src目錄下。點(diǎn)擊圖4的“Finish”按鈕完成Struts1.2的導(dǎo)入。
?????? 為了減少例子的復(fù)雜性，本文中數(shù)據(jù)的獲取在程序中構(gòu)造，并不從數(shù)據(jù)庫中獲取。Java類放在com.amigo包下。接下來講述一下本實(shí)例的代碼：
3.1.1.1 User.java
?????? 該文件為用戶對(duì)象類，代碼如下所示：
package com.amigo;
import java.util.Date;
/**
?* 用戶對(duì)象.
?*/
public class User {
???????? /** 用戶名.*/
???????? private String loginName;
???????? /** 姓名. */
???????? private String name;
???????? /** 手機(jī)號(hào). */
???????? private String mobile;
???????? /** 地址. */
???????? private String address;
???????? /** Email.*/
???????? private String email;
???????? /** 創(chuàng)建時(shí)間. */
???????? private Date genTime;
???????? public String getAddress() {
?????????????????? return address;
???????? }
???????? public void setAddress(String address) {
?????????????????? this.address = address;
???????? }
???????? public String getEmail() {
?????????????????? return email;
???????? }
???????? public void setEmail(String email) {
?????????????????? this.email = email;
???????? }
???????? public String getLoginName() {
?????????????????? return loginName;
???????? }
???????? public void setLoginName(String loginName) {
?????????????????? this.loginName = loginName;
???????? }
???????? public String getMobile() {
?????????????????? return mobile;
???????? }
???????? public void setMobile(String mobile) {
?????????????????? this.mobile = mobile;
???????? }
???????? public String getName() {
?????????????????? return name;
???????? }
???????? public void setName(String name) {
?????????????????? this.name = name;
???????? }
???????? public Date getGenTime() {
?????????????????? return genTime;
???????? }
???????? public void setGenTime(Date genTime) {
?????????????????? this.genTime = genTime;
???????? }
}
3.1.1.2 UserManageBean.java
?????? 該類為業(yè)務(wù)邏輯類，提供一個(gè)獲取用戶列表的方法，為了減少例子的復(fù)雜性，用戶列表不從數(shù)據(jù)庫中獲取。該類的代碼如下所示：
package com.amigo;
import java.util.ArrayList;
import java.util.List;
/**
?* 用戶管理業(yè)務(wù)邏輯類.
?*/
public class UserManageBean {
???????? /**
???????? ?* 獲取用戶列表.
???????? ?* @return 返回用戶列表
???????? ?*/
???????? public List getUserList() {
?????????????????? List<User> list = new ArrayList<User>();
?????????????????? for (int i = 0; i < 100; i++) {
??????????????????????????? User user = new User();
??????????????????????????? user.setAddress("廣州中山大道" + i + "號(hào)");
??????????????????????????? user.setEmail("amigo" + i + "@126.com");
??????????????????????????? user.setLoginName("amigo" + i);
??????????????????????????? user.setMobile("136666666" + i);
??????????????????????????? user.setName("阿蜜果" + i);
??????????????????????????? list.add(user);
?????????????????? }
?????????????????? return list;
???????? }
}
3.1.1.3 ViewUserListAction.java
?????? 該類為Action類，調(diào)用業(yè)務(wù)邏輯類的getUserList()方法獲取用戶列表，并將其放到request中，并跳轉(zhuǎn)到顯示用戶信息的頁面。該類的內(nèi)容如下：
package com.amigo;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.*;
/**
?* 用戶列表
?*/
public class ViewUserListAction extends Action {
???????? private UserManageBean userManageBean = new UserManageBean();
??? /**
???? * 調(diào)用業(yè)務(wù)邏輯類獲取用戶信息列表.
???? * @param mapping 配置文件信息
???? * @param form 表單
???? * @param request 請(qǐng)求
???? * @param httpServletResponse 回應(yīng)
???? * @return 跳轉(zhuǎn)到用戶信息列表頁
???? */
??? public ActionForward execute(ActionMapping mapping,
??????????? ActionForm form, HttpServletRequest request,
??????????? HttpServletResponse httpServletResponse) {
??????? try {
??????????? List userList = userManageBean.getUserList();
??????????? request.setAttribute("userList", userList);
??????????? return mapping.findForward("viewUserList");
??????? } catch (Exception e) {
??????????? return mapping.findForward("error");
??????? }
??? }
}
3.1.1.4 userList.jsp
?????? 在WebRoot目錄下建立userList.jsp文件，展示用最簡的語句來實(shí)現(xiàn)ec分頁。代碼如下所示：
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/extremecomponents.tld" prefix="ec" %>
<html:html locale="true">
???????? <head>
?????????????????? <title>ec最簡語法實(shí)例</title>
?????????????????? <link href="${pageContext.request.contextPath}/styles/extremecomponents.css" rel="stylesheet" type="text/css">
???????? </head>
???????? <body>
??? <ec:table
??????????????????????????? items="userList"
??????????????????????????? action="${pageContext.request.contextPath}/viewUserList.do"
??????????????????????????? imagePath="${pageContext.request.contextPath}/images/table/*.gif"
???????? ??? locale = "zh_CN"
??????????????????????????? >
??????????????????????????? <ec:row highlightRow="true">?
???????????????????????????????????? <ec:column property="loginName" title="用戶名"/>
???????????????????????????????????? <ec:column property="name" title="姓名"/>
???????????????????????????????????? <ec:column property="mobile" title="手機(jī)號(hào)"/>
???????????????????????????????????? <ec:column property="address" title="地址"/>
???????????????????????????????????? <ec:column property="email" title="Email"/>
??????????? ??? </ec:row>
?????????????????? </ec:table>
???????? </body>
</html:html>
?????? 其中<ec:table/>的items屬性中的“userList”與ViewUserListAction.java類中的request.setAttribute("userList", userList);中的key對(duì)應(yīng)。
?????? <ec:row>
3.1.1.5 struts-config.xml
?????? 最后還需要在struts-config.xml中進(jìn)行相應(yīng)的配置。配置后的文件內(nèi)容如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">
<struts-config>
?<data-sources />
?<form-beans />
?<global-exceptions />
?<global-forwards />
?<action-mappings>
?????????????????? <action path="/viewUserList"
???????????????????????????????????? type="com.amigo.ViewUserListAction"
???????????????????????????????????? scope="request"
???????????????????????????????????? validate="false">
??????????????????????????? <forward name="viewUserList" path="/userList.jsp" />
??????????????????????????? <forward name="error" path="/error.jsp" />
?????????????????? </action>
?</action-mappings>
?<message-resources parameter="ApplicationResources" />
</struts-config>
3.1.1.6 運(yùn)行
???部署該項(xiàng)目并重新啟動(dòng)Tomcat后，訪問地址：
?????? http://localhost:8080/extremecomponents/viewUserList.do，該例的運(yùn)行效果如圖5所示：
圖5??最簡語句實(shí)例運(yùn)行效果
?????? 從上圖可以看出，默認(rèn)情況下，沒頁的記錄條數(shù)為15，ec會(huì)根據(jù)實(shí)際情況決定“First”、“Prev”、“Next”和“Last”的按鈕顯示。同時(shí)，查詢框在默認(rèn)情況下是顯示的，用戶在各框中輸入查詢條件后，點(diǎn)擊右上方的“Filter”按鈕，可查出符合該模糊查詢條件的記錄列表。
3.1.2改變table標(biāo)簽屬性的實(shí)例
?????? 在3.1.1的實(shí)例中，jsp頁面ec部分的代碼比較簡單，代碼如下所示：
??? <ec:table
??????????????????????????? items="userList"
??????????????????????????? action="${pageContext.request.contextPath}/viewUserList.do"
??????????????????????????? imagePath="${pageContext.request.contextPath}/images/table/*.gif"
???????? ??? ???????? locale = "zh_CN"
??????????????????????????? >
??????????????????????????? <ec:row highlightRow="true">?
???????????????????????????????????? <ec:column property="loginName" title="用戶名"/>
???????????????????????????????????? <ec:column property="name" title="姓名"/>
???????????????????????????????????? <ec:column property="mobile" title="手機(jī)號(hào)"/>
???????????????????????????????????? <ec:column property="address" title="地址"/>
???????????????????????????????????? <ec:column property="email" title="Email"/>
??????????? ??? </ec:row>
?????????????????? </ec:table>
?????? 在上面代碼中，table標(biāo)簽用來設(shè)定什么被顯示并且如何進(jìn)行顯示。默認(rèn)的ec在servlet范圍尋找具有名稱和items屬性設(shè)置相同的Beans集合。在上例中只是用到了table標(biāo)簽的items、action、imagePath和locale屬性，在本節(jié)中將對(duì)該標(biāo)簽的所有屬性進(jìn)行詳細(xì)講述。
3.1.2.1 items
?????? 該屬性用于表示Beans集合，表示的是取回的集合數(shù)據(jù)的引用。例如在3.1.1的例子中的userList是在Action中放入到request中的，當(dāng)然這個(gè)屬性還可以放入到page、session和application范圍內(nèi)，不過ec查找該屬性的順序是按照page -> request -> session -> application的順序的。
?????? 放入的屬性可以為繼承java.util.Collection的任何類，在3.1.1的例子中java.util.List類就是繼承該類的。集合中的元素一般是普通的javabean或者Map。下面演示一個(gè)列表元素為Map類型對(duì)象的例子，演示時(shí)只需要將3.1.1的例子中的內(nèi)容修改成如下內(nèi)容即可：
package com.amigo;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
?* 用戶管理業(yè)務(wù)邏輯類.
?*/
public class UserManageBean {
???????? /**
???????? ?* 獲取用戶列表.
???????? ?* @return 返回用戶列表
???????? ?*/
???????? public List getUserList() {
?????????????????? List<Map> list = new ArrayList<Map>();
?????????????????? for (int i = 0; i < 100; i++) {
??????????????????????????? Map<String, String> map = new HashMap<String, String>();
??????????????????????????? map.put("address", "廣州中山大道" + i + "號(hào)");
??????????????????????????? map.put("email", "amigo" + i + "@126.com");
??????????????????????????? map.put("loginName", "amigo" + i);
??????????????????????????? map.put("mobile", "136666666" + i);
??????????????????????????? map.put("name", "阿蜜果" + i);
??????????????????????????? list.add(map);
?????????????????? }
?????????????????? return list;
???????? }
}
?????? 此時(shí)在輸入地址：http://localhost:8080/extremecomponents/viewUserList.do，可看到運(yùn)行效果同3.1.1的例子是一樣的。
3.1.2.2 action
?????? 該屬性用于指定翻頁、導(dǎo)出、查詢請(qǐng)請(qǐng)求時(shí)定向的路徑，在3.1.1中action屬性的值為：${pageContext.request.contextPath}/viewUserList.do，${pageContext.request.contextPath}為上下文路徑。
?????? 注意：在action的路徑中，不需要將參數(shù)放到后面（例如method=list），因?yàn)?/span>ec會(huì)將request中的數(shù)據(jù)保存。
3.1.2.3 imagePath
?????? 該屬性用于設(shè)置ec的圖片所在的目錄，例如在3.1.1的例子中ec的圖片在WebRoot/images下，所以該屬性為：${pageContext.request.contextPath}/images/table/*.gif。*gif使得ec知道圖片的格式為GIF。當(dāng)然，讀者也可以在extremecomponents.properties中設(shè)置這個(gè)屬性，那就不必每個(gè)table標(biāo)簽都設(shè)置該屬性了。
3.1.2.4 filterable
?????? 該屬性用來執(zhí)行記錄的過濾，即在前面所說的對(duì)記錄列表進(jìn)行模糊查詢，也即圖5中查詢框的顯示。該屬性指定的是這個(gè)ec表格是不是可過濾的，默認(rèn)為true，即默認(rèn)情況下是顯示各查詢框的。
?????? 讀者可以將該屬性設(shè)置為false，當(dāng)為false時(shí)，將不再顯示查詢框
?????? 不過，column標(biāo)簽也具有該屬性，若table標(biāo)簽的該屬性為true，但某列的該屬性為false時(shí)，也將不顯示該列的查詢框。如果table標(biāo)簽的該屬性為false，則盡管各column的所有filterable屬性都為true，也將不顯示查詢框。
3.1.2.5 sortable
?????? 該屬性用來執(zhí)行記錄的排序，即在前面所說的點(diǎn)擊各列的列頭實(shí)現(xiàn)升序和降序排列。該屬性指定的是這個(gè)ec表格是不是可排序的，默認(rèn)為true。
?????? 讀者可以將該屬性設(shè)置為false，當(dāng)為false時(shí)，點(diǎn)擊各列頭將不會(huì)有響應(yīng)。
?????? 不過，column標(biāo)簽也具有該屬性，若table標(biāo)簽的該屬性為true，但某列的該屬性為false時(shí)，也將不顯示該列的查詢框。如果table標(biāo)簽的該屬性為false，則盡管各column的所有filterable屬性都為true，也將不能對(duì)各列進(jìn)行排序。
3.1.2.6 rowsDisplayed
?????? 該屬性用于設(shè)置每頁顯示的記錄數(shù)，默認(rèn)每頁顯示15條記錄，讀者可以對(duì)其進(jìn)行修改，例如在3.1.1例中的userList中將table修改成：
<ec:table
??????????????????????????? items="userList"
??????????????????????????? action="${pageContext.request.contextPath}/viewUserList.do"
??????????????????????????? imagePath="${pageContext.request.contextPath}/images/table/*.gif"
???????? ??? ???????? locale = "zh_CN"
??????????????????????????? rowsDisplayed = "50"
??????????????????????????? >
?????? 此時(shí)的運(yùn)行效果如圖6所示：
圖6?? rowDisplayed為50時(shí)的運(yùn)行結(jié)果
3.1.2.7 cellspacing、cellpadding、border、width、style、styleClass
?????? 這些屬性都是用來設(shè)置table的樣式的屬性，這與HTML的table元素的對(duì)應(yīng)屬性是一樣的，因此在此不再贅述。
3.1.2.8 state
?????? 這個(gè)屬性也是table標(biāo)簽的一個(gè)很有用屬性。
該屬性有4個(gè)取值，分別為：default、notifyToDefault、persist和notifyToPersist。這4者的描述如下：
l????????default：不維持任何狀態(tài)，此為默認(rèn)的情況；
l????????persist：沒有任何參數(shù)傳入，將一直維持表的狀態(tài)；
l????????notifyToDefault：將一直維持表的狀態(tài)直到你傳入?yún)?shù)告訴它回到default狀態(tài)；
l????????notifyToPersist狀態(tài)將一直維持當(dāng)前狀態(tài)直到你傳入?yún)?shù)告訴它維持persisted狀態(tài)。
對(duì)于需要維持狀態(tài)的情況，一般是將該屬性設(shè)置為persist。
3.1.2.9 showPagination
?????? 該屬性用于設(shè)置是否顯示分頁欄和是否需要分頁，默認(rèn)值為true。當(dāng)在3.1.1例子中的userList.jsp中的table屬性添加：showPagination = "false"時(shí)，運(yùn)行效果如圖7所示：
圖7??不顯示分頁的效果
?????? 從上圖可以看出右上角的分頁欄：已不再顯示，并且記錄都是在一個(gè)頁面顯示，不再分頁顯示。
3.1.2.10 showStatusBar
?????? 該屬性用于設(shè)置是否顯示狀態(tài)條，默認(rèn)值為true。當(dāng)在3.1.1例子中的userList.jsp中的table屬性添加：showStatusBar = "false"時(shí)，運(yùn)行效果如圖8所示：
圖8??不顯示狀態(tài)欄的顯示效果
?????? 從上圖可以看出，左上方的“找到100 條記錄, 顯示 x 到y”已經(jīng)不再顯示。
3.1.2.11 showTooltips
?????? 該屬性用于設(shè)置當(dāng)用戶的鼠標(biāo)移動(dòng)到某個(gè)列頭時(shí)是否顯示提示信息，默認(rèn)時(shí)值為true。例如在3.1.1例中當(dāng)用戶鼠標(biāo)移動(dòng)到用戶名這列的列頭時(shí)，將顯示“排序用戶名”，當(dāng)讀者將showTooltips設(shè)置為false時(shí)，將不會(huì)再有這個(gè)提示信息。
3.1.2.12 title
?????? 該屬性用于設(shè)置表的上方的顯示標(biāo)題，例如在3.1.1的例子中userList.jsp的table標(biāo)簽添加title屬性：title = "用戶列表"，顯示效果如圖9所示：
圖9??設(shè)置了title屬性的顯示效果
3.1.2.13 var
表將遍歷所有列，使用var屬性可以將當(dāng)前行對(duì)應(yīng)的bean從集合傳到page范圍，因此你可以從page范圍中重新得到這些數(shù)據(jù)進(jìn)行操作。例如將3.1.1例子中的userList.jsp修改為如下內(nèi)容：
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/extremecomponents.tld" prefix="ec" %>
<html:html locale="true">
???????? <head>
?????????????????? <title>var屬性測試</title>
?????????????????? <link href="${pageContext.request.contextPath}/styles/extremecomponents.css" rel="stylesheet" type="text/css">
???????? </head>
???????? <body>
??? <ec:table
??????????????????????????? items="userList"
??????????????????????????? action="${pageContext.request.contextPath}/viewUserList.do"
??????????????????????????? imagePath="${pageContext.request.contextPath}/images/table/*.gif"
???????? ??? ???????? locale = "zh_CN"
???????? ??? ???????? var="user"
???????? ??? >
??????????????????????????? <ec:row highlightRow="true">
???????????????????????????????????? <ec:column property="loginNameAndName" title="用戶名和姓名">
?????????????????????????????????????????????? ${user.loginName}--${user.name}
???????????????????????????????????? </ec:column>
???????????????????????????????????? <ec:column property="mobile" title="手機(jī)號(hào)"/>
???????????????????????????????????? <ec:column property="address" title="地址"/>
???????????????????????????????????? <ec:column property="email" title="Email"/>
??????????? ??? </ec:row>
?????????????????? </ec:table>
???????? </body>
</html:html>
在上例中，var中定義了列表中遍歷時(shí)元素的名稱，在下面的列中，通過user.屬性名的方式獲取各列的信息。運(yùn)行效果如圖10所示：
圖10?var屬性測試的運(yùn)行效果
3.1.3改變row標(biāo)簽屬性的實(shí)例
本小節(jié)與3.1.2一樣，在3.1.1的例子上進(jìn)行改造。在3.1.1中，row標(biāo)簽使用很簡單，代碼如下所示：
<ec:row highlightRow="true">
……
</ec:row>
在本小節(jié)中將通過實(shí)例的方式講述row標(biāo)簽的屬性。
3.1.3.1 highlightRow
?????? 該屬性用于高亮顯示行，可取值為true或false，默認(rèn)值為false。設(shè)置為true時(shí)，當(dāng)鼠標(biāo)移動(dòng)到某行時(shí)將會(huì)高亮顯示（顯示為黃色）。如圖11所示：
圖11?高亮顯示效果
?????? 讀者將其設(shè)置為false時(shí)，再次移動(dòng)到某行，將不再高亮顯示。
3.1.3.2 style、styleClass、highlightClass
?????? 這幾個(gè)屬性用于設(shè)置行的樣式，其中style（內(nèi)聯(lián)樣式）和styleClass（指定CSS類）屬性與HTML的tr元素的對(duì)應(yīng)屬性是一樣的，在此不再贅述。highlightClass屬性用于設(shè)置行高亮顯示時(shí)的css類。
3.1.3.3 onclick、onmouseover、onmouseout
?????? 這幾個(gè)是JavaScript屬性，這三者用于對(duì)行數(shù)據(jù)進(jìn)行動(dòng)態(tài)交互處理。
3.1.4改變column標(biāo)簽屬性的實(shí)例
3.1.4.1 property
?????? 該屬性用于指定該列使用的bean的屬性。當(dāng)指定的屬性（eg. loginNamex）不存在時(shí)，將顯示為空，若將3.1.1例中的loginName改為loginNamex，則顯示效果如圖12所示：
圖12??指定property不存在時(shí)的顯示效果
?????? 也可以在<ec:column></ec:column>中添加顯示的信息，例如將：
???????? <ec:column property="loginName" title="用戶名"/>
?????? 修改為：
???????? <ec:column property="loginNamex" title="用戶名">amigo</ec:column>
?????? 此時(shí)的運(yùn)行效果如圖13所示：
圖13??指定property不存在且在列中設(shè)置了值時(shí)的顯示效果
3.1.4.2 title
?????? 該屬性的值即為列頭顯示的值。例如上面各圖中的“用戶名”和“姓名”等。當(dāng)該屬性沒有設(shè)置時(shí)，ec將使用property的值作為列頭。
3.1.4.3 cell
?????? 每一列總是被實(shí)現(xiàn)Cell接口的對(duì)象修飾，讀者可以認(rèn)為Cell是一個(gè)為了html顯示或?qū)С龆祷馗袷交档膶?duì)象。發(fā)行包包含的Cell有DisplayCell、DateCell、 NumberCell和RowCountCell。 DisplayCell是僅僅顯示列值的默認(rèn)cell；DateCell使用parse屬性（可選）和format屬性來格式化對(duì)應(yīng)的屬性值； NumberCell使用format屬性來格式化對(duì)應(yīng)的屬性值；RowCountCell顯示當(dāng)前行。
?????? 下面來看一個(gè)DateCell使用的例子，讀者可以在userList.jsp中加上創(chuàng)建時(shí)間（genTime）這一列，并在UserManageBean類增加這一列（為Map時(shí)）：
map.put("genTime", (new Date()).toString());
并將Map的new語句改成：
Map<String, Object> map = new HashMap<String, Object>();
或者(為普通bean時(shí))：
user.setGenTime(new Date());
?????? 在userList.jsp中增加如下column：
<ec:column property="genTime" title="創(chuàng)建時(shí)間" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/>
?????? 此時(shí)訪問：http://localhost:8080/extremecomponents/viewUserList.do，運(yùn)行效果如圖14所示：
圖14??將column的cell屬性設(shè)置為date的運(yùn)行效果
?????? 讀者也可以對(duì)column的cell屬性進(jìn)行擴(kuò)展，擴(kuò)展類只需要繼承抽象類AbstractCell即可，下面來看一個(gè)例子，我們定義一個(gè)LoginNameCell自定義Cell類，該類將loginName屬性前加上“阿蜜果”字符串（只是為了演示自定義Cell的方法，在某列前加上某字符串的功能可以在jsp頁面中通過簡單的方法實(shí)現(xiàn)），該類的代碼如下：
package com.amigo;
import org.extremecomponents.table.bean.Column;
import org.extremecomponents.table.cell.AbstractCell;
import org.extremecomponents.table.core.TableModel;
/**
?* 用戶名Cell類（將loginName屬性前加上“阿蜜果”字符串）.
?*/
public class LoginNameCell extends AbstractCell {
???????? @Override
???????? protected String getCellValue(TableModel model, Column column) {
?????????????????? String loginName = column.getValue().toString();
?????????????????? return "阿蜜果" + loginName;
???????? }
}
接著在userList.jsp文件中修改loginName列為如下代碼：
<ec:column property="loginName" title="用戶名" cell="com.amigo.LoginNameCell"/>
?????? 此時(shí)的運(yùn)行結(jié)果如圖15所示：
圖15??擴(kuò)展column標(biāo)簽的Cell屬性的運(yùn)行效果
【提示】cell現(xiàn)在是singleton并且不再線程安全，改變的原因是為了Cell接口能更簡單地被使用。 init()和destroy()方法作為singleton更靈活但是處于一種混亂的狀態(tài)。
3.1.4.4 filterCell
?????? 該filterCell屬性用于控制過濾器如何顯示，它和cell屬性非常相像并且也是實(shí)現(xiàn)Cell接口。有效值有filter和droplist，默認(rèn)值為filter。當(dāng)然讀者也可以在這個(gè)基礎(chǔ)上進(jìn)行擴(kuò)展，只需要指明確切的列名即可。
讀者可以將loginName這一列的增加filterCell屬性，并將其值設(shè)置為為droplist。
?????? filterCell也允許你定義定制的過濾器，所有你必須做的就是實(shí)現(xiàn)Cell接口或者擴(kuò)展AbstractCell，并設(shè)置列標(biāo)簽的Cell屬性為類的全路徑。例如，如果你定制了一個(gè)名為MyCell的Cell，那么你可以像下面一樣使用它：
<ec:column property="firstName" filterCell="com.mycompany.cell.MyFilterCell"/>
3.1.4.5 headerCell
headerCell屬性控制headers如何顯示，它和cell屬性非常相像并且也是實(shí)現(xiàn)Cell接口。默認(rèn)header cell作為文本顯示，包含排序邏輯。
headerCell也允許你定義定制的過濾器，所有你必須做的就是實(shí)現(xiàn)Cell接口或者擴(kuò)展AbstractCell，并設(shè)置列標(biāo)簽的Cell屬性為類的全路徑。例如，如果你定制了一個(gè)名為MyCell的Cell，那么你可以像下面一樣使用它：
<ec:column property="firstName" headerCell="com.mycompany.cell.MyHeaderCell"/>
3.1.4.6 width、style、styleClass、headerStyle、headerClass、filterStyle和filterClass
這幾個(gè)屬性都是用來定義樣式的，如下：
l????????width用來定義寬度；
l????????style：定義列內(nèi)聯(lián)的樣式；
l????????styleClass：定義一個(gè)列顯示的css類；
l????????headerStyle：定義header的內(nèi)聯(lián)的樣式；
l????????headerClass屬性允許你改變header列的css類；
l????????filterStyle：定義filter列的內(nèi)聯(lián)的樣式；
l????????filterClass屬性允許你改變filter列的css類。
3.1.4.7 parse
?????? 這個(gè)屬性在講述cell這個(gè)屬性舉例的時(shí)候有提到過，可以用來格式化Date對(duì)象，例如：
<ec:column property="genTime" title="創(chuàng)建時(shí)間" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/>
3.1.4.8 format
?????? 這個(gè)屬性在講述cell這個(gè)屬性舉例的時(shí)候有提到過，可用來格式化日期型或貨幣型對(duì)象，下面舉一個(gè)貨幣型格式化的例子：
<ec:column property="payroll" cell="currency" format="###,###,##0.00"/>
3.1.4.9 filterable
?????? 該屬性在講述table標(biāo)簽的時(shí)候有提到過，它用來定義指定的列是不是可過濾的，不過，這個(gè)列設(shè)置為true時(shí)，也只能在table的該標(biāo)簽為true的時(shí)候才能其作用。
3.1.4.10 sortable
?????? 該屬性在講述table標(biāo)簽的時(shí)候有提到過，它用來定義指定的列是不是可排序的，不過，這個(gè)列設(shè)置為true時(shí)，也只能在table的該標(biāo)簽為true的時(shí)候才能其作用。
3.1.4.11 calc和calcTitle
?????? 使用舉例：
<ec:column property="data" calc="total" calcTitle="Total:" />
calc屬性實(shí)現(xiàn)具有唯一方法的Calc接口：
public interface Calc {
public Number getCalcResult(TableModel model, Column column);
}
它傳入model和column，并返回一個(gè)Number型的值。默認(rèn)的實(shí)現(xiàn)為總計(jì)和平均值。
為了使用定制的Calc，只需要使用ColumnTag的calc屬性來指定實(shí)現(xiàn)Calc接口的實(shí)現(xiàn)類的全路徑。
【提示】Calc為singleton并且不是線程安全的，因此不要定義任何類變量。
3.1.4.12 viewsAllowed
viewsAllowed屬性指定類允許使用的視圖。視圖包括：html、pdf、xls、csv，以及任何定制的視圖。如果指定一個(gè)或幾個(gè)視圖，那么列僅能使用這些指定的視圖。例如：指定viewsAllowed="pdf"，這意味著這列只允許PDF導(dǎo)出，而不能進(jìn)行其他格式的導(dǎo)出或html視圖。例如：
<ec:table
?????????????????? items="userList"
?????????????????? action="${pageContext.request.contextPath}/viewUserList.do"
?????????????????? imagePath="${pageContext.request.contextPath}/images/table/*.gif"
???????? ??? locale = "zh_CN"
???????? ??? >
?????????????????? <ec:row highlightRow="true">
?????????????????? ???????? <ec:column property="loginName" title="用戶名" viewsAllowed="pdf"/>
?????????????????? ???????? <ec:column property="name" title="姓名"/>
?????????????????? ???????? <ec:column property="mobile" title="手機(jī)號(hào)"/>
?????????????????? ???????? <ec:column property="address" title="地址"/>
?????????????????? ???????? <ec:column property="email" title="Email"/>
?????????????????? ???????? <ec:column property="genTime" title="創(chuàng)建時(shí)間" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/>
??????? </ec:row>
</ec:table>
??? 因?yàn)閘oginName設(shè)置了只在pdf視圖顯示，因此在html運(yùn)行時(shí)該列將不顯示，如圖16所示：
圖16?? 設(shè)置了viewsAllowed為pdf的顯示效果
3.1.4.13 viewsDenied
viewsDenied屬性指定類不允許使用的視圖。視圖包括：html、pdf、xls、csv，以及任何定制的視圖。如果你指定一個(gè)或幾個(gè)視圖，那么列僅這些指定的視圖不能被使用。例如：你指定viewsDenied="html"，這意味著這列不允許使用html試圖，但能進(jìn)行任何形式的導(dǎo)出。例如：
<ec:table
?????????????????? items="userList"
?????????????????? action="${pageContext.request.contextPath}/viewUserList.do"
?????????????????? imagePath="${pageContext.request.contextPath}/images/table/*.gif"
???????? ??? locale = "zh_CN"
???????? ??? >
?????????????????? <ec:row highlightRow="true">
??????????????????????????? <ec:column property="loginName" title="用戶名"/>
??????????????????????????? <ec:column property="name" title="姓名" viewsDenied="html"/>
??????????????????????????? <ec:column property="mobile" title="手機(jī)號(hào)"/>
??????????????????????????? <ec:column property="address" title="地址"/>
??????????????????????????? <ec:column property="email" title="Email"/>
??????????????????????????? <ec:column property="genTime" title="創(chuàng)建時(shí)間" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/>
???????? </ec:row>
</ec:table>
當(dāng)進(jìn)行這樣的設(shè)置時(shí)，運(yùn)行頁面，將看到name列不顯示，因?yàn)樗O(shè)置在html不顯示。運(yùn)行效果如圖17所示：
圖17??設(shè)置viewsDenied屬性為html時(shí)的顯示效果
3.2 高級(jí)篇
3.2.1處理參數(shù)
ec能夠指定是否處理所有的參數(shù)。默認(rèn)為處理所有的參數(shù)，這意味著當(dāng)進(jìn)行過濾、排序、分頁時(shí)，所有的參數(shù)都被ec保存并傳到JSP中，這通常是所需要的功能。若只想保存一些特定的參數(shù)時(shí)，讀者可以通過設(shè)置表的autoIncludeParameters屬性值為false來到達(dá)目的。
要傳入的參數(shù)通過ec的parameter標(biāo)簽將參數(shù)傳遞過去。下面來看一個(gè)例子：
<ec:table???
items="userList"
???????? action="${pageContext.request.contextPath}/viewUserList.do"
imagePath="${pageContext.request.contextPath}/images/table/*.gif"
autoIncludeParameters="false"
>?
<ec:parameter name="name" value="amigo"/>
...
</ec:table>
3.2.2導(dǎo)出PDF
若需要使用ec的導(dǎo)出功能，還需要在web.xml中設(shè)置一個(gè)導(dǎo)出過濾器，增加代碼如下：
<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>
本小節(jié)講述一個(gè)在ec中如何導(dǎo)出PDF。ec中提供了exportPdf標(biāo)簽實(shí)現(xiàn)這個(gè)功能，該標(biāo)簽的主要屬性如下：
3.2.2.1 fileName
?????? 該屬性用于定義導(dǎo)出的PDF文件的名稱，例如user.PDF。
3.2.2.2 tooltip
?????? 用戶的鼠標(biāo)移動(dòng)到“導(dǎo)出”圖標(biāo)時(shí)出現(xiàn)的提示信息，例如可設(shè)置該屬性為：導(dǎo)出PDF。
3.2.2.3 headerColor
?????? 定義導(dǎo)出的PDF文件中列頭的顏色，例如設(shè)置為“blue”，表示將列頭的顏色設(shè)置為藍(lán)色。
3.2.2.4 headerBackgroundColor
?????? 定義導(dǎo)出的PDF文件中列頭行的背景顏色，例如設(shè)置為“red”，表示將列頭行的背景顏色設(shè)置為紅色。
3.2.2.5 headerTitle
?????? 設(shè)置頭行的標(biāo)題，例如設(shè)置為：用戶列表。
3.2.2.6 完整實(shí)例
?????? 本節(jié)的子仍然在3.1.1中的例子上進(jìn)行改造，userList.jsp的代碼修改成如下所示：
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/extremecomponents.tld" prefix="ec" %>
<html:html locale="true">
???????? <head>
?????????????????? <title>導(dǎo)出PDF實(shí)例</title>
?????????????????? <link href="${pageContext.request.contextPath}/styles/extremecomponents.css" rel="stylesheet" type="text/css">
???????? </head>
???????? <body>
??? <ec:table
??????????????????????????? items="userList"
??????????????????????????? action="${pageContext.request.contextPath}/viewUserList.do"
??????????????????????????? imagePath="${pageContext.request.contextPath}/images/table/*.gif"
???????? ??? locale = "zh_CN"
???????? ??? >
???????? ??? <ec:exportPdf
???????? ??? ?????????? fileName="user.pdf"
???????? ??? ?????????? tooltip="導(dǎo)出PDF"
???????? ??? ?????????? headerColor="blue"
???????? ??? ?????????? headerBackgroundColor="red"
???????? ??? ?????????? headerTitle="用戶列表"/>
??????????????????????????? <ec:row highlightRow="true">
???????????????????????????????????? <ec:column property="loginName" title="用戶名"/>
???????????????????????????????????? <ec:column property="name" title="姓名"/>
???????????????????????????????????? <ec:column property="mobile" title="手機(jī)號(hào)"/>
???????????????????????????????????? <ec:column property="address" title="地址"/>
???????????????????????????????????? <ec:column property="email" title="Email"/>
???????????????????????????????????? <ec:column property="genTime" title="創(chuàng)建時(shí)間" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/>
??????????? </ec:row>
?????????????????? </ec:table>
???????? </body>
</html:html>
?????? 此時(shí)運(yùn)行：http://localhost:8080/extremecomponents/viewUserList.do，運(yùn)行效果如圖18所示：
圖18??導(dǎo)出PDF實(shí)例的運(yùn)行效果
?????? 讀者可以看到，在圖18的右上方出現(xiàn)了導(dǎo)出PDF的圖標(biāo)，當(dāng)點(diǎn)擊該圖標(biāo)時(shí)，將提示保存PDF文件，打開保存的PDF文件，該文件內(nèi)容如圖19所示：
圖19?? PDF的顯示效果
?????? 從圖19中可以看出，生成的PDF中存在中文亂碼問題，在這個(gè)版本中，XLS導(dǎo)出時(shí)的亂碼問題已經(jīng)解決，PDF的導(dǎo)出內(nèi)容亂碼問題正在解決中，不過網(wǎng)上也提出了一些解決方案，可參見如下兩篇文章：
《最新eXtremeComponents包：支持 PDF中文導(dǎo)出》：
（http://www.blogjava.net/lucky/archive/2006/03/archive/2006/03/10/34717.html）
《eXtremeComponents FAQ（中文版）》：
http://blog.163.com/joyce004@126/blog/static/20765732007394454383/
3.2.3導(dǎo)出Excel
本小節(jié)講述一個(gè)在ec中如何導(dǎo)出XLS。ec中提供了exportXls標(biāo)簽實(shí)現(xiàn)這個(gè)功能，該標(biāo)簽的主要屬性如下：
3.2.3.1 fileName
?????? 該屬性用于定義導(dǎo)出的Excel文件的名稱，例如user.xls。
3.2.3.2 tooltip
?????? 用戶的鼠標(biāo)移動(dòng)到“導(dǎo)出”圖標(biāo)時(shí)出現(xiàn)的提示信息，例如可設(shè)置該屬性為：導(dǎo)出Excel。
3.2.3.3 完整實(shí)例
?????? 本節(jié)的子仍然在3.1.1中的例子上進(jìn)行改造，userList.jsp的代碼修改成如下所示：
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/extremecomponents.tld" prefix="ec" %>
<html:html locale="true">
???????? <head>
?????????????????? <title>導(dǎo)出Excel實(shí)例</title>
?????????????????? <link href="${pageContext.request.contextPath}/styles/extremecomponents.css" rel="stylesheet" type="text/css">
???????? </head>
???????? <body>
??? <ec:table
??????????????????????????? items="userList"
??????????????????????????? action="${pageContext.request.contextPath}/viewUserList.do"
??????????????????????????? imagePath="${pageContext.request.contextPath}/images/table/*.gif"
???????? ??? locale = "zh_CN"
???????? ??? >
???????? ??? <ec:exportXls
???????? ??? ?????????? fileName="user.xls"
???????? ??? ?????????? tooltip="導(dǎo)出Excel"/>
??????????????????????????? <ec:row highlightRow="true">
???????????????????????????????????? <ec:column property="loginName" title="用戶名"/>
???????????????????????????????????? <ec:column property="name" title="姓名"/>
???????????????????????????????????? <ec:column property="mobile" title="手機(jī)號(hào)"/>
???????????????????????????????????? <ec:column property="address" title="地址"/>
???????????????????????????????????? <ec:column property="email" title="Email"/>
???????????????????????????????????? <ec:column property="genTime" title="創(chuàng)建時(shí)間" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/>
??????????? </ec:row>
?????????????????? </ec:table>
???????? </body>
</html:html>
?????? 此時(shí)運(yùn)行：http://localhost:8080/extremecomponents/viewUserList.do，運(yùn)行效果如圖20所示：
圖20?導(dǎo)出Excel的顯示效果
?????? 從圖20中可以看出，右上方多了一個(gè)導(dǎo)出Excel的圖標(biāo)，點(diǎn)擊該圖標(biāo)，可將Excel文件導(dǎo)出到所選擇的路徑，導(dǎo)出后的Excel文件如圖21所示：
圖21?導(dǎo)出Excel的顯示效果
3.2.4導(dǎo)出CSV
本小節(jié)講述一個(gè)在ec中如何導(dǎo)出CSV。ec中提供了exportCsv標(biāo)簽實(shí)現(xiàn)這個(gè)功能，該標(biāo)簽的主要屬性如下：
3.2.4.1 fileName
?????? 該屬性用于定義導(dǎo)出的CSV文件的名稱，例如user.csv。
3.2.4.2 tooltip
?????? 用戶的鼠標(biāo)移動(dòng)到“導(dǎo)出”圖標(biāo)時(shí)出現(xiàn)的提示信息，例如可設(shè)置該屬性為：導(dǎo)出CSV。
3.2.4.3 delimiter
?????? 該屬性用來定義分隔符，默認(rèn)的分隔符為逗號(hào)（,），讀者可以自定義分隔符，例如“|”等。
3.2.3.4 完整實(shí)例
?????? 本節(jié)的例子仍然在3.1.1中的例子上進(jìn)行改造，userList.jsp的代碼修改成如下所示：
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/extremecomponents.tld" prefix="ec" %>
<html:html locale="true">
???????? <head>
?????????????????? <title>導(dǎo)出CSV實(shí)例</title>
?????????????????? <link href="${pageContext.request.contextPath}/styles/extremecomponents.css" rel="stylesheet" type="text/css">
???????? </head>
???????? <body>
??? <ec:table
??????????????????????????? items="userList"
??????????????????????????? action="${pageContext.request.contextPath}/viewUserList.do"
??????????????????????????? imagePath="${pageContext.request.contextPath}/images/table/*.gif"
???????? ??? locale = "zh_CN"
???????? ??? >
???????? ??? <ec:exportCsv
???????? ??? ?????????? fileName="user.csv"
???????? ??? ?????????? tooltip="導(dǎo)出CSV"
???????? ??? ?????????? delimiter="|"/>
??????????????????????????? <ec:row highlightRow="true">
???????????????????????????????????? <ec:column property="loginName" title="用戶名"/>
???????????????????????????????????? <ec:column property="name" title="姓名"/>
???????????????????????????????????? <ec:column property="mobile" title="手機(jī)號(hào)"/>
???????????????????????????????????? <ec:column property="address" title="地址"/>
???????????????????????????????????? <ec:column property="email" title="Email"/>
???????????????????????????????????? <ec:column property="genTime" title="創(chuàng)建時(shí)間" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/>
??????????? </ec:row>
?????????????????? </ec:table>
???????? </body>
</html:html>
?
附錄參考文章：
《eXtremeComponents參考文檔》：
http://www.blogjava.net/lucky/articles/33380.html
《extremeTable釋疑》：
http://blog.csdn.net/pangpangde/archive/2006/07/13/913326.aspx
《最新eXtremeComponents包：支持 PDF中文導(dǎo)出》：
（http://www.blogjava.net/lucky/archive/2006/03/archive/2006/03/10/34717.html）
《eXtremeComponents FAQ（中文版）》：
http://blog.163.com/joyce004@126/blog/static/20765732007394454383/
總結(jié)
以上是生活随笔為你收集整理的eXtremeComponents（简称ec）是一系列提供高级显示的开源JSP定制标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA面试场景题
- 下一篇： 分享100个好看且实用的JavaScri