3122人阅读
eXtremeComponents（简称ec）是一系列提供高级显示的开源JSP定制标签，当前的包含的组件为eXtremeTable，用于以表形式显示数据。
使用ec需要一定的前提条件，JDK要求1.3或更高的版本，Servlet需要2.3或以上版本。
eXtremeTable在给定的servlet范围（scope）外取得Beans或Maps的集合用于JSP页面显示。 servelet范围的搜索顺序是：page, request, session和application。通过设定TableTage的items 属性，eXtremeTable知道哪些需要在servlet范围外被保持。
集合里的Beans是pojo，如果使用maps那么它就是键值对。你可以认为每一个bean就是表中的一行数据。 在接下来的文档中，我将使用Beans集合来代替这两种集合。
2. 下载与配置
&&&&&& 首页：
&&&&&& 下载地址：
http://sourceforge.net/project/showfiles.php?group_id=108168&package_id=116800
&&&&&& 下载界面如图1所示：
图1&ec的下载界面
&&&&&& 当前ec的最新版为1.0.1正式版。其中eXtremeComponents-1.0.1.zip为不带依赖包的压缩包，其中包含ec发布的jar、js、tld和css文件，还包括其源码。其目录结构如图2所示：
图2 eXtremeComponents-1.0.1.zip的目录结构&&&&& 图3 dependencies压缩包的目录结构
&&&&&& eXtremeComponents-1.0.1-with-dependencies.zip除了包含eXtremeComponents-1.0.1.zip的内容外，还包含一个lib目录，用来存放依赖的jar包。lib下的minimum目录为最小的jar要求，如下所示：
lcommons-beanutils-1.7.0.jar
lcommons-collections-3.0.jar
lcommons-lang-2.0.jar
lcommons-logging-1.0.4.jar
lstandard-1.0.2.jar
lib下的pdf目录为需要使用PDF导出功能时需要另外添加的jar包，如下所示：
lavalon-framework-4.0.jar
lbatik-1.5-fop-0.20-5.jar
lfop-0.20.5.jar
lxalan-2.5.1.jar
lxercesImpl-2.6.1.jar
lxml-apis-2.0.2.jar
lib下的xls目录为需要使用XLS导出功能时需要添加的jar包，该目录下只有一个jar包，即：poi-2.5.1.jar。
要在Web项目中使用ec来进行分页，需要做一些准备工作。
建立名为extremecomponents的Web工程后，第一步需要dist目录下的ec的jar包：extremecomponents-1.0.1.jar拷贝到Web工程的WebRoot/WEB-INF/lib目录，并将相关的依赖包也拷贝到该目录。
接着在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所需的全部图片）整个目录拷贝到WebRoot目录下即可。
3. 使用举例
3.1 初级篇
3.1.1最简语句实例
&&&&&& 本例讲解ec进行分页的一个最简单的例子，在该例子中，显示一个用户列表，用户列表中有若干User对象，每个User对象有loginName（用户名）、name（姓名）、mobile（手机号）、address（地址）、email（Email）这五个属性。
&&&&&& 首先读者需要在extremecomponents工程中引入Struts1.2。读者可以在MyEclipse中选中该工程后，点击右键选择&MyEclipse&-&&Add Struts Capabilities&&，弹出新建对话框，如图4所示：
图4&& 为工程导入Struts1.2的对话框
&&&&&& 在&Struts specification&中选择&Struts 1.2&，在&Base poackage for new classes&中不输入内容，使得资源文件放置src目录下。点击图4的&Finish&按钮完成Struts1.2的导入。
&&&&&& 为了减少例子的复杂性，本文中数据的获取在程序中构造，并不从数据库中获取。Java类放在com.amigo包下。接下来讲述一下本实例的代码：
3.1.1.1 User.java
&&&&&& 该文件为用户对象类，代码如下所示：
package com.
import java.util.D
&* 用户对象.
public class User {
&&&&&&&& /** 用户名.*/
&&&&&&&& private String loginN
&&&&&&&& /** 姓名. */
&&&&&&&& private S
&&&&&&&& /** 手机号. */
&&&&&&&& private S
&&&&&&&& /** 地址. */
&&&&&&&& private S
&&&&&&&& /** Email.*/
&&&&&&&& private S
&&&&&&&& /** 创建时间. */
&&&&&&&& private Date genT
&&&&&&&& public String getAddress() {
&&&&&&&&&&&&&&&&&&
&&&&&&&& }
&&&&&&&& public void setAddress(String address) {
&&&&&&&&&&&&&&&&&& this.address =
&&&&&&&& }
&&&&&&&& public String getEmail() {
&&&&&&&&&&&&&&&&&&
&&&&&&&& }
&&&&&&&& public void setEmail(String email) {
&&&&&&&&&&&&&&&&&& this.email =
&&&&&&&& }
&&&&&&&& public String getLoginName() {
&&&&&&&&&&&&&&&&&& return loginN
&&&&&&&& }
&&&&&&&& public void setLoginName(String loginName) {
&&&&&&&&&&&&&&&&&& this.loginName = loginN
&&&&&&&& }
&&&&&&&& public String getMobile() {
&&&&&&&&&&&&&&&&&&
&&&&&&&& }
&&&&&&&& public void setMobile(String mobile) {
&&&&&&&&&&&&&&&&&& this.mobile =
&&&&&&&& }
&&&&&&&& public String getName() {
&&&&&&&&&&&&&&&&&&
&&&&&&&& }
&&&&&&&& public void setName(String name) {
&&&&&&&&&&&&&&&&&& this.name =
&&&&&&&& }
&&&&&&&& public Date getGenTime() {
&&&&&&&&&&&&&&&&&& return genT
&&&&&&&& }
&&&&&&&& public void setGenTime(Date genTime) {
&&&&&&&&&&&&&&&&&& this.genTime = genT
&&&&&&&& }
3.1.1.2 UserManageBean.java
&&&&&& 该类为业务逻辑类，提供一个获取用户列表的方法，为了减少例子的复杂性，用户列表不从数据库中获取。该类的代码如下所示：
package com.
import java.util.ArrayL
import java.util.L
&* 用户管理业务逻辑类.
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 + "号");
&&&&&&&&&&&&&&&&&&&&&&&&&&& user.setEmail("amigo" + i + "@");
&&&&&&&&&&&&&&&&&&&&&&&&&&& user.setLoginName("amigo" + i);
&&&&&&&&&&&&&&&&&&&&&&&&&&& user.setMobile("" + i);
&&&&&&&&&&&&&&&&&&&&&&&&&&& user.setName("阿蜜果" + i);
&&&&&&&&&&&&&&&&&&&&&&&&&&& list.add(user);
&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&
&&&&&&&& }
3.1.1.3 ViewUserListAction.java
&&&&&& 该类为Action类，调用业务逻辑类的getUserList()方法获取用户列表，并将其放到request中，并跳转到显示用户信息的页面。该类的内容如下：
package com.
import java.util.L
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import org.apache.struts.action.*;
&* 用户列表
public class ViewUserListAction extends Action {
&&&&&&&& private UserManageBean userManageBean = new UserManageBean();
&&&& * 调用业务逻辑类获取用户信息列表.
&&&& * @param mapping 配置文件信息
&&&& * @param form 表单
&&&& * @param request 请求
&&&& * @param httpServletResponse 回应
&&&& * @return 跳转到用户信息列表页
&&& 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文件，展示用最简的语句来实现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最简语法实例&/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="手机号"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &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对应。
&&&&&& &ec:row&
3.1.1.5 struts-config.xml
&&&&&& 最后还需要在struts-config.xml中进行相应的配置。配置后的文件内容如下所示：
&?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 运行
&&& 部署该项目并重新启动Tomcat后，访问地址：
&&&&&& ，该例的运行效果如图5所示：
图5&& 最简语句实例运行效果
&&&&&& 从上图可以看出，默认情况下，没页的记录条数为15，ec会根据实际情况决定&First&、&Prev&、&Next&和&Last&的按钮显示。同时，查询框在默认情况下是显示的，用户在各框中输入查询条件后，点击右上方的&Filter&按钮，可查出符合该模糊查询条件的记录列表。
3.1.2改变table标签属性的实例
&&&&&& 在3.1.1的实例中，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="手机号"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="address" title="地址"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="email" title="Email"/&
&&&&&&&&&&& &&& &/ec:row&
&&&&&&&&&&&&&&&&&& &/ec:table&
&&&&&& 在上面代码中，table标签用来设定什么被显示并且如何进行显示。默认的ec在servlet范围寻找具有名称和items属性设置相同的Beans集合。 在上例中只是用到了table标签的items、action、imagePath和locale属性，在本节中将对该标签的所有属性进行详细讲述。
3.1.2.1 items
&&&&&& 该属性用于表示Beans集合，表示的是取回的集合数据的引用。例如在3.1.1的例子中的userList是在Action中放入到request中的，当然这个属性还可以放入到page、session和application范围内，不过ec查找该属性的顺序是按照page -& request -& session -& application的顺序的。
&&&&&& 放入的属性可以为继承java.util.Collection的任何类，在3.1.1的例子中java.util.List类就是继承该类的。集合中的元素一般是普通的javabean或者Map。下面演示一个列表元素为Map类型对象的例子，演示时只需要将3.1.1的例子中的内容修改成如下内容即可：
package com.
import java.util.ArrayL
import java.util.HashM
import java.util.L
import java.util.M
&* 用户管理业务逻辑类.
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 + "号");
&&&&&&&&&&&&&&&&&&&&&&&&&&& map.put("email", "amigo" + i + "@");
&&&&&&&&&&&&&&&&&&&&&&&&&&& map.put("loginName", "amigo" + i);
&&&&&&&&&&&&&&&&&&&&&&&&&&& map.put("mobile", "" + i);
&&&&&&&&&&&&&&&&&&&&&&&&&&& map.put("name", "阿蜜果" + i);
&&&&&&&&&&&&&&&&&&&&&&&&&&& list.add(map);
&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&
&&&&&&&& }
&&&&&& 此时在输入地址：，可看到运行效果同3.1.1的例子是一样的。
3.1.2.2 action
&&&&&& 该属性用于指定翻页、导出、查询请请求时定向的路径，在3.1.1中action属性的值为：${pageContext.request.contextPath}/viewUserList.do，${pageContext.request.contextPath}为上下文路径。
&&&&&& 注意：在action的路径中，不需要将参数放到后面（例如method=list），因为ec会将request中的数据保存。
3.1.2.3 imagePath
&&&&&& 该属性用于设置ec的图片所在的目录，例如在3.1.1的例子中ec的图片在WebRoot/images下，所以该属性为：${pageContext.request.contextPath}/images/table/*.gif。*gif使得ec知道图片的格式为GIF。当然，读者也可以在extremecomponents.properties中设置这个属性，那就不必每个table标签都设置该属性了。
3.1.2.4 filterable
&&&&&& 该属性用来执行记录的过滤，即在前面所说的对记录列表进行模糊查询，也即图5中查询框的显示。该属性指定的是这个ec表格是不是可过滤的，默认为true，即默认情况下是显示各查询框的。
&&&&&& 读者可以将该属性设置为false，当为false时，将不再显示查询框
&&&&&& 不过，column标签也具有该属性，若table标签的该属性为true，但某列的该属性为false时，也将不显示该列的查询框。如果table标签的该属性为false，则尽管各column的所有filterable属性都为true，也将不显示查询框。
3.1.2.5 sortable
&&&&&& 该属性用来执行记录的排序，即在前面所说的点击各列的列头实现升序和降序排列。该属性指定的是这个ec表格是不是可排序的，默认为true。
&&&&&& 读者可以将该属性设置为false，当为false时，点击各列头将不会有响应。
&&&&&& 不过，column标签也具有该属性，若table标签的该属性为true，但某列的该属性为false时，也将不显示该列的查询框。如果table标签的该属性为false，则尽管各column的所有filterable属性都为true，也将不能对各列进行排序。
3.1.2.6 rowsDisplayed
&&&&&& 该属性用于设置每页显示的记录数，默认每页显示15条记录，读者可以对其进行修改，例如在3.1.1例中的userList中将table修改成：
&&&&&&&&&&&&&&&&&&&&&&&&&&& items="userList"
&&&&&&&&&&&&&&&&&&&&&&&&&&& action="${pageContext.request.contextPath}/viewUserList.do"
&&&&&&&&&&&&&&&&&&&&&&&&&&& imagePath="${pageContext.request.contextPath}/images/table/*.gif"
&&&&&&&& &&& &&&&&&&& locale = "zh_CN"
&&&&&&&&&&&&&&&&&&&&&&&&&&& rowsDisplayed = "50"
&&&&&&&&&&&&&&&&&&&&&&&&&&& &
&&&&&& 此时的运行效果如图6所示：
图6&& rowDisplayed为50时的运行结果
3.1.2.7 cellspacing、cellpadding、border、width、style、styleClass
&&&&&& 这些属性都是用来设置table的样式的属性，这与HTML的table元素的对应属性是一样的，因此在此不再赘述。
3.1.2.8 state
&&&&&& 这个属性也是table标签的一个很有用属性。
该属性有4个取值，分别为：default、notifyToDefault、persist和notifyToPersist。这4者的描述如下：
ldefault：不维持任何状态，此为默认的情况；
lpersist：没有任何参数传入，将一直维持表的状态；
lnotifyToDefault：将一直维持表的状态直到你传入参数告诉它回到default状态；
lnotifyToPersist状态将一直维持当前状态直到你传入参数告诉它维持persisted状态。
对于需要维持状态的情况，一般是将该属性设置为persist。
3.1.2.9 showPagination
&&&&&& 该属性用于设置是否显示分页栏和是否需要分页，默认值为true。当在3.1.1例子中的userList.jsp中的table属性添加：showPagination = "false"时，运行效果如图7所示：
图7&& 不显示分页的效果
&&&&&& 从上图可以看出右上角的分页栏：已不再显示，并且记录都是在一个页面显示，不再分页显示。
3.1.2.10 showStatusBar
&&&&&& 该属性用于设置是否显示状态条，默认值为true。当在3.1.1例子中的userList.jsp中的table属性添加：showStatusBar = "false"时，运行效果如图8所示：
图8&& 不显示状态栏的显示效果
&&&&&& 从上图可以看出，左上方的&找到100 条记录, 显示 x 到y&已经不再显示。
3.1.2.11 showTooltips
&&&&&& 该属性用于设置当用户的鼠标移动到某个列头时是否显示提示信息，默认时值为true。例如在3.1.1例中当用户鼠标移动到用户名这列的列头时，将显示&排序用户名&，当读者将showTooltips设置为false时，将不会再有这个提示信息。
3.1.2.12 title
&&&&&& 该属性用于设置表的上方的显示标题，例如在3.1.1的例子中userList.jsp的table标签添加title属性：title = "用户列表"，显示效果如图9所示：
图9&& 设置了title属性的显示效果
3.1.2.13 var
表将遍历所有列，使用var属性可以将当前行对应的bean从集合传到page范围，因此你可以从page范围中重新得到这些数据 进行操作。例如将3.1.1例子中的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&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="手机号"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="address" title="地址"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="email" title="Email"/&
&&&&&&&&&&& &&& &/ec:row&
&&&&&&&&&&&&&&&&&& &/ec:table&
&&&&&&&& &/body&
&/html:html&
在上例中，var中定义了列表中遍历时元素的名称，在下面的列中，通过user.属性名的方式获取各列的信息。运行效果如图10所示：
图10&var属性测试的运行效果
3.1.3改变row标签属性的实例
本小节与3.1.2一样，在3.1.1的例子上进行改造。在3.1.1中，row标签使用很简单，代码如下所示：
&ec:row highlightRow="true"&
在本小节中将通过实例的方式讲述row标签的属性。
3.1.3.1 highlightRow
&&&&&& 该属性用于高亮显示行，可取值为true或false，默认值为false。设置为true时，当鼠标移动到某行时将会高亮显示（显示为黄色）。如图11所示：
图11&高亮显示效果
&&&&&& 读者将其设置为false时，再次移动到某行，将不再高亮显示。
3.1.3.2 style、styleClass、highlightClass
&&&&&& 这几个属性用于设置行的样式，其中style（内联样式）和styleClass（指定CSS类）属性与HTML的tr元素的对应属性是一样的，在此不再赘述。highlightClass属性用于设置行高亮显示时的css类。
3.1.3.3 onclick、onmouseover、onmouseout
&&&&&& 这几个是JavaScript属性，这三者用于对行数据进行动态交互处理。
3.1.4改变column标签属性的实例
3.1.4.1 property
&&&&&& 该属性用于指定该列使用的bean的属性。当指定的属性（eg. loginNamex）不存在时，将显示为空，若将3.1.1例中的loginName改为loginNamex，则显示效果如图12所示：
图12&& 指定property不存在时的显示效果
&&&&&& 也可以在&ec:column&&/ec:column&中添加显示的信息，例如将：
&&&&&&&& &ec:column property="loginName" title="用户名"/&
&&&&&& 修改为：
&&&&&&&& &ec:column property="loginNamex" title="用户名"&amigo&/ec:column&
&&&&&& 此时的运行效果如图13所示：
图13&& 指定property不存在且在列中设置了值时的显示效果
3.1.4.2 title
&&&&&& 该属性的值即为列头显示的值。例如上面各图中的&用户名&和&姓名&等。当该属性没有设置时，ec将使用property的值作为列头。
3.1.4.3 cell
&&&&&& 每一列总是被实现Cell接口的对象修饰，读者可以认为Cell是一个为了html显示或导出而返回格式化值的对象。 发行包包含的Cell有DisplayCell、DateCell、 NumberCell和RowCountCell。 DisplayCell是仅仅显示列值的默认cell；DateCell使用parse属性（可选）和format属性来格式化对应的属性值； NumberCell使用format属性来格式化对应的属性值；RowCountCell显示当前行。
&&&&&& 下面来看一个DateCell使用的例子，读者可以在userList.jsp中加上创建时间（genTime）这一列，并在UserManageBean类增加这一列（为Map时）：
map.put("genTime", (new Date()).toString());
并将Map的new语句改成：
Map&String, Object& map = new HashMap&String, Object&();
或者(为普通bean时)：
user.setGenTime(new Date());
&&&&&& 在userList.jsp中增加如下column：
&ec:column property="genTime" title="创建时间" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/&
&&&&&& 此时访问：，运行效果如图14所示：
图14&& 将column的cell属性设置为date的运行效果
&&&&&& 读者也可以对column的cell属性进行扩展，扩展类只需要继承抽象类AbstractCell即可，下面来看一个例子，我们定义一个LoginNameCell自定义Cell类，该类将loginName属性前加上&阿蜜果&字符串（只是为了演示自定义Cell的方法，在某列前加上某字符串的功能可以在jsp页面中通过简单的方法实现），该类的代码如下：
package com.
import org.extremecomponents.table.bean.C
import org.extremecomponents.table.cell.AbstractC
import org.extremecomponents.table.core.TableM
&* 用户名Cell类（将loginName属性前加上&阿蜜果&字符串）.
public class LoginNameCell extends AbstractCell {
&&&&&&&& @Override
&&&&&&&& protected String getCellValue(TableModel model, Column column) {
&&&&&&&&&&&&&&&&&& String loginName = column.getValue().toString();
&&&&&&&&&&&&&&&&&& return "阿蜜果" + loginN
&&&&&&&& }
接着在userList.jsp文件中修改loginName列为如下代码：
&ec:column property="loginName" title="用户名" cell="com.amigo.LoginNameCell"/&
&&&&&& 此时的运行结果如图15所示：
图15&& 扩展column标签的Cell属性的运行效果
【提示】cell现在是singleton并且不再线程安全，改变的原因是为了Cell接口能更简单地被使用。 init()和destroy()方法作为singleton更灵活但是处于一种混乱的状态。
3.1.4.4 filterCell
&&&&&& 该filterCell属性用于控制过滤器如何显示，它和cell属性非常相像并且也是实现Cell接口。有效值有filter和droplist，默认值为filter。当然读者也可以在这个基础上进行扩展，只需要指明确切的列名即可。
读者可以将loginName这一列的增加filterCell属性，并将其值设置为为droplist。
&&&&&& filterCell也允许你定义定制的过滤器，所有你必须做的就是实现Cell接口或者扩展AbstractCell， 并设置列标签的Cell属性为类的全路径。例如，如果你定制了一个名为MyCell的Cell，那么你可以像下面一样使用它：
&ec:column property="firstName" filterCell="com.mycompany.cell.MyFilterCell"/&
3.1.4.5 headerCell
headerCell属性控制headers如何显示，它和cell属性非常相像并且也是实现Cell接口。 默认header cell作为文本显示，包含排序逻辑。
headerCell也允许你定义定制的过滤器，所有你必须做的就是实现Cell接口或者扩展AbstractCell， 并设置列标签的Cell属性为类的全路径。例如，如果你定制了一个名为MyCell的Cell，那么你可以像下面一样使用它：
&ec:column property="firstName" headerCell="com.mycompany.cell.MyHeaderCell"/&
3.1.4.6 width、style、styleClass、headerStyle、headerClass、filterStyle和filterClass
这几个属性都是用来定义样式的，如下：
lwidth用来定义宽度；
lstyle：定义列内联的样式；
lstyleClass：定义一个列显示的css类；
lheaderStyle：定义header的内联的样式；
lheaderClass属性允许你改变header列的css类；
lfilterStyle：定义filter列的内联的样式；
lfilterClass属性允许你改变filter列的css类。
3.1.4.7 parse
&&&&&& 这个属性在讲述cell这个属性举例的时候有提到过，可以用来格式化Date对象，例如：
&ec:column property="genTime" title="创建时间" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/&
3.1.4.8 format
&&&&&& 这个属性在讲述cell这个属性举例的时候有提到过，可用来格式化日期型或货币型对象，下面举一个货币型格式化的例子：
&ec:column property="payroll" cell="currency" format="###,###,##0.00"/&
3.1.4.9 filterable
&&&&&& 该属性在讲述table标签的时候有提到过，它用来定义指定的列是不是可过滤的，不过，这个列设置为true时，也只能在table的该标签为true的时候才能其作用。
3.1.4.10 sortable
&&&&&& 该属性在讲述table标签的时候有提到过，它用来定义指定的列是不是可排序的，不过，这个列设置为true时，也只能在table的该标签为true的时候才能其作用。
3.1.4.11 calc和calcTitle
&&&&&& 使用举例：
&ec:column property="data" calc="total" calcTitle="Total:" /&
calc属性实现具有唯一方法的Calc接口：
public interface Calc {
public Number getCalcResult(TableModel model, Column column);
它传入model和column，并返回一个Number型的值。默认的实现为总计和平均值。
为了使用定制的Calc，只需要使用ColumnTag的calc属性来指定实现Calc接口的实现类的 全路径。
【提示】Calc为singleton并且不是线程安全的，因此不要定义任何类变量。
3.1.4.12 viewsAllowed
viewsAllowed属性指定类允许使用的视图。视图包括：html、pdf、xls、csv，以及任何定制的视图。 如果指定一个或几个视图，那么列仅能使用这些指定的视图。例如：指定viewsAllowed="pdf"，这意味着 这列只允许PDF导出，而不能进行其他格式的导出或html视图。例如：
&&&&&&&&&&&&&&&&&& 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="手机号"/&
&&&&&&&&&&&&&&&&&& &&&&&&&& &ec:column property="address" title="地址"/&
&&&&&&&&&&&&&&&&&& &&&&&&&& &ec:column property="email" title="Email"/&
&&&&&&&&&&&&&&&&&& &&&&&&&& &ec:column property="genTime" title="创建时间" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/&
&&&&&&& &/ec:row&
&/ec:table&
&&& 因为loginName设置了只在pdf视图显示，因此在html运行时该列将不显示，如图16所示：
图16&& 设置了viewsAllowed为pdf的显示效果
3.1.4.13 viewsDenied
viewsDenied属性指定类不允许使用的视图。视图包括：html、pdf、xls、csv，以及任何定制的视图。 如果你指定一个或几个视图，那么列仅这些指定的视图不能被使用。例如：你指定viewsDenied="html"，这意味着 这列不允许使用html试图，但能进行任何形式的导出。例如：
&&&&&&&&&&&&&&&&&& 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="手机号"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="address" title="地址"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="email" title="Email"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="genTime" title="创建时间" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/&
&&&&&&&& &/ec:row&
&/ec:table&
当进行这样的设置时，运行页面，将看到name列不显示，因为它设置在html不显示。运行效果如图17所示：
图17&& 设置viewsDenied属性为html时的显示效果
3.2 高级篇
3.2.1处理参数
ec能够指定是否处理所有的参数。默认为处理所有的参数，这意味着当进行过滤、排序、分页时，所有的参数都被ec保存并传到JSP中，这通常是所需要的功能。若只想保存一些特定的参数时，读者可以通过设置表的autoIncludeParameters属性值为false来到达目的。
要传入的参数通过ec的parameter标签将参数传递过去。下面来看一个例子：
&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导出PDF
若需要使用ec的导出功能，还需要在web.xml中设置一个导出过滤器，增加代码如下：
&&&&&&&&&&&&&&&&&& &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&
本小节讲述一个在ec中如何导出PDF。ec中提供了exportPdf标签实现这个功能，该标签的主要属性如下：
3.2.2.1 fileName
&&&&&& 该属性用于定义导出的PDF文件的名称，例如user.PDF。
3.2.2.2 tooltip
&&&&&& 用户的鼠标移动到&导出&图标时出现的提示信息，例如可设置该属性为：导出PDF。
3.2.2.3 headerColor
&&&&&& 定义导出的PDF文件中列头的颜色，例如设置为&blue&，表示将列头的颜色设置为蓝色。
3.2.2.4 headerBackgroundColor
&&&&&& 定义导出的PDF文件中列头行的背景颜色，例如设置为&red&，表示将列头行的背景颜色设置为红色。
3.2.2.5 headerTitle
&&&&&& 设置头行的标题，例如设置为：用户列表。
3.2.2.6 完整实例
&&&&&& 本节的子仍然在3.1.1中的例子上进行改造，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&导出PDF实例&/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="导出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="手机号"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="address" title="地址"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="email" title="Email"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="genTime" title="创建时间" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/&
&&&&&&&&&&& &/ec:row&
&&&&&&&&&&&&&&&&&& &/ec:table&
&&&&&&&& &/body&
&/html:html&
&&&&&& 此时运行：，运行效果如图18所示：
图18&& 导出PDF实例的运行效果
&&&&&& 读者可以看到，在图18的右上方出现了导出PDF的图标，当点击该图标时，将提示保存PDF文件，打开保存的PDF文件，该文件内容如图19所示：
图19&& PDF的显示效果
&&&&&& 从图19中可以看出，生成的PDF中存在中文乱码问题，在这个版本中，XLS导出时的乱码问题已经解决，PDF的导出内容乱码问题正在解决中，不过网上也提出了一些解决方案，可参见如下两篇文章：
《eXtremeComponents FAQ（中文版）》：
3.2.3导出Excel
本小节讲述一个在ec中如何导出XLS。ec中提供了exportXls标签实现这个功能，该标签的主要属性如下：
3.2.3.1 fileName
&&&&&& 该属性用于定义导出的Excel文件的名称，例如user.xls。
3.2.3.2 tooltip
&&&&&& 用户的鼠标移动到&导出&图标时出现的提示信息，例如可设置该属性为：导出Excel。
3.2.3.3 完整实例
&&&&&& 本节的子仍然在3.1.1中的例子上进行改造，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&导出Excel实例&/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="导出Excel"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:row highlightRow="true"&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="loginName" title="用户名"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="name" title="姓名"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="mobile" title="手机号"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="address" title="地址"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="email" title="Email"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="genTime" title="创建时间" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/&
&&&&&&&&&&& &/ec:row&
&&&&&&&&&&&&&&&&&& &/ec:table&
&&&&&&&& &/body&
&/html:html&
&&&&&& 此时运行：，运行效果如图20所示：
图20&导出Excel的显示效果
&&&&&& 从图20中可以看出，右上方多了一个导出Excel的图标，点击该图标，可将Excel文件导出到所选择的路径，导出后的Excel文件如图21所示：
图21&导出Excel的显示效果
3.2.4导出CSV
本小节讲述一个在ec中如何导出CSV。ec中提供了exportCsv标签实现这个功能，该标签的主要属性如下：
3.2.4.1 fileName
&&&&&& 该属性用于定义导出的CSV文件的名称，例如user.csv。
3.2.4.2 tooltip
&&&&&& 用户的鼠标移动到&导出&图标时出现的提示信息，例如可设置该属性为：导出CSV。
3.2.4.3 delimiter
&&&&&& 该属性用来定义分隔符，默认的分隔符为逗号（,），读者可以自定义分隔符，例如&|&等。
3.2.3.4 完整实例
&&&&&& 本节的例子仍然在3.1.1中的例子上进行改造，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&导出CSV实例&/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="导出CSV"
&&&&&&&& &&& &&&&&&&&&& delimiter="|"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:row highlightRow="true"&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="loginName" title="用户名"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="name" title="姓名"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="mobile" title="手机号"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="address" title="地址"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="email" title="Email"/&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &ec:column property="genTime" title="创建时间" cell="date" parse="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"/&
&&&&&&&&&&& &/ec:row&
&&&&&&&&&&&&&&&&&& &/ec:table&
&&&&&&&& &/body&
&/html:html&
&&&&&& 此时运行：，运行效果如图22所示：
图22&导出CSV的显示效果
&&&&&& 从图22中可以看出，右上方多了一个导出CSV的图标，点击该图标，可将CSV文件导出到所选择的路径，导出后的CSV文件如图23所示：
图23&导出的CSV的显示效果
参考文章：
《extremeTable释疑》：
《eXtremeComponents FAQ（中文版）》：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：46327次
排名：千里之外
原创：13篇
转载：12篇
评论：18条
(2)(1)(1)(1)(1)(1)(1)(1)(2)(1)(3)(1)(1)(1)(2)(3)(2)