Microsoft Word - ec使用总结.doc

Transcription

1 ec 使用总结 文 : 阿蜜果 日期 : 简介 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. 下载与配置 2.1 下载 首页 : 下载地址 : 下载界面如图 1 所示 : 图 1 ec 的下载界面 当前 ec 的最新版为 正式版 其中 extremecomponents zip 为不带依赖包的压 缩包, 其中包含 ec 发布的 jar js tld 和 css 文件, 还包括其源码 其目录结构如图 2 所示 :

2 图 2 extremecomponents zip 的目录结构图 3 dependencies 压缩包的目录结构 extremecomponents with-dependencies.zip 除了包含 extremecomponents zip 的内容外, 还包含一个 lib 目录, 用来存放依赖的 jar 包 lib 下的 minimum 目录为最小的 jar 要求, 如下所示 : commons-beanutils jar commons-collections-3.0.jar commons-lang-2.0.jar commons-logging jar standard jar lib 下的 pdf 目录为需要使用 PDF 导出功能时需要另外添加的 jar 包, 如下所示 : avalon-framework-4.0.jar batik-1.5-fop jar fop jar xalan jar xercesimpl jar xml-apis jar lib 下的 xls 目录为需要使用 XLS 导出功能时需要添加的 jar 包, 该目录下只有一个 jar 包, 即 :poi jar 2.2 配置 要在 Web 项目中使用 ec 来进行分页, 需要做一些准备工作 建立名为 extremecomponents 的 Web 工程后, 第一步需要 dist 目录下的 ec 的 jar 包 : extremecomponents 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. 使用举例 3.1 初级篇 最简语句实例 本例讲解 ec 进行分页的一个最简单的例子, 在该例子中, 显示一个用户列表, 用户列表中有若干 User 对象, 每个 User 对象有 loginname( 用户名 ) name( 姓名 ) mobile( 手机号 ) address( 地址 ) ( ) 这五个属性 首先读者需要在 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 包下 接下来讲述一下本实例的代码 : User.java 该文件为用户对象类, 代码如下所示 : package com.amigo; import java.util.date;

4 /** * 用户对象. */ public class User { /** 用户名.*/ private String loginname; /** 姓名. */ private String name; /** 手机号. */ private String mobile; /** 地址. */ private String address; /** .*/ private String ; /** 创建时间. */ private Date gentime; public String getaddress() { return address; public void setaddress(string address) { this.address = address; public String get () { return ; public void set (string ) { this. = ; public String getloginname() { return loginname; public void setloginname(string loginname) { this.loginname = loginname;

5 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; UserManageBean.java 该类为业务逻辑类, 提供一个获取用户列表的方法, 为了减少例子的复杂性, 用户列表 不从数据库中获取 该类的代码如下所示 : package com.amigo; import java.util.arraylist; import java.util.list; /** * 用户管理业务逻辑类. */ public class UserManageBean { /** * 获取用户列表.

6 返回用户列表 */ public List getuserlist() { List<User> list = new ArrayList<User>(); for (int i = 0; i < 100; i++) { User user = new User(); user.setaddress(" 广州中山大道 " + i + " 号 "); user.set ("amigo" + i + "@126.com"); user.setloginname("amigo" + i); user.setmobile(" " + i); user.setname(" 阿蜜果 " + i); list.add(user); return list; ViewUserListAction.java 该类为 Action 类, 调用业务逻辑类的 getuserlist() 方法获取用户列表, 并将其放到 request 中, 并跳转到显示用户信息的页面 该类的内容如下 : 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(); /** * 调用业务逻辑类获取用户信息列表. mapping 配置文件信息 *@param form 表单 request 请求 httpservletresponse 回应

7 跳转到用户信息列表页 */ 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"); 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=" " title=" "/> </ec:row> </ec:table>

8 </body> </html:html> 其中 <ec:table/> 的 items 属性中的 userlist 与 ViewUserListAction.java 类中的 request.setattribute("userlist", userlist); 中的 key 对应 <ec:row> 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" " <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> 运行 部署该项目并重新启动 Tomcat 后, 访问地址 : 该例的运行效果如图 5 所示 :

9 图 5 最简语句实例运行效果从上图可以看出, 默认情况下, 没页的记录条数为 15,ec 会根据实际情况决定 First Prev Next 和 Last 的按钮显示 同时, 查询框在默认情况下是显示的, 用户在各框中输入查询条件后, 点击右上方的 Filter 按钮, 可查出符合该模糊查询条件的记录列表 改变 table 标签属性的实例 在 的实例中,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=" " title=" "/> </ec:row> </ec:table> 在上面代码中,table 标签用来设定什么被显示并且如何进行显示 默认的 ec 在 servlet 范围寻找具有名称和 items 属性设置相同的 Beans 集合 在上例中只是用到了 table 标签的 items action imagepath 和 locale 属性, 在本节中将对该标签的所有属性进行详细讲述 items 该属性用于表示 Beans 集合, 表示的是取回的集合数据的引用 例如在 的例子中的 userlist 是在 Action 中放入到 request 中的, 当然这个属性还可以放入到 page session 和 application 范围内, 不过 ec 查找该属性的顺序是按照 page -> request -> session -> application 的顺序的

10 放入的属性可以为继承 java.util.collection 的任何类, 在 的例子中 java.util.list 类就是继承该类的 集合中的元素一般是普通的 javabean 或者 Map 下面演示一个列表元素为 Map 类型对象的例子, 演示时只需要将 的例子中的内容修改成如下内容即可 : package com.amigo; import java.util.arraylist; import java.util.hashmap; import java.util.list; import java.util.map; /** * 用户管理业务逻辑类. */ public class UserManageBean { /** * 获取用户列表. 返回用户列表 */ 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(" ", "amigo" + i + "@126.com"); map.put("loginname", "amigo" + i); map.put("mobile", " " + i); map.put("name", " 阿蜜果 " + i); list.add(map); return list; 此时在输入地址 : 可看到运行效果同 的例子是一样的 action 该属性用于指定翻页 导出 查询请请求时定向的路径, 在 中 action 属性的值为 : ${pagecontext.request.contextpath/viewuserlist.do,${pagecontext.request.contextpath 为上下文路径 注意 : 在 action 的路径中, 不需要将参数放到后面 ( 例如 method=list), 因为 ec 会将 request 中的数据保存

11 imagepath 该属性用于设置 ec 的图片所在的目录, 例如在 的例子中 ec 的图片在 WebRoot/images 下, 所以该属性为 :${pagecontext.request.contextpath/images/table/*.gif *gif 使得 ec 知道图片的格式为 GIF 当然, 读者也可以在 extremecomponents.properties 中设置这个属性, 那就不必每个 table 标签都设置该属性了 filterable 该属性用来执行记录的过滤, 即在前面所说的对记录列表进行模糊查询, 也即图 5 中查询框的显示 该属性指定的是这个 ec 表格是不是可过滤的, 默认为 true, 即默认情况下是显示各查询框的 读者可以将该属性设置为 false, 当为 false 时, 将不再显示查询框不过,column 标签也具有该属性, 若 table 标签的该属性为 true, 但某列的该属性为 false 时, 也将不显示该列的查询框 如果 table 标签的该属性为 false, 则尽管各 column 的所有 filterable 属性都为 true, 也将不显示查询框 sortable 该属性用来执行记录的排序, 即在前面所说的点击各列的列头实现升序和降序排列 该属性指定的是这个 ec 表格是不是可排序的, 默认为 true 读者可以将该属性设置为 false, 当为 false 时, 点击各列头将不会有响应 不过,column 标签也具有该属性, 若 table 标签的该属性为 true, 但某列的该属性为 false 时, 也将不显示该列的查询框 如果 table 标签的该属性为 false, 则尽管各 column 的所有 filterable 属性都为 true, 也将不能对各列进行排序 rowsdisplayed 该属性用于设置每页显示的记录数, 默认每页显示 15 条记录, 读者可以对其进行修改, 例如在 例中的 userlist 中将 table 修改成 : <ec:table items="userlist" action="${pagecontext.request.contextpath/viewuserlist.do" imagepath="${pagecontext.request.contextpath/images/table/*.gif" locale = "zh_cn" rowsdisplayed = "50" > 此时的运行效果如图 6 所示 :

12 图 6 rowdisplayed 为 50 时的运行结果 cellspacing cellpadding border width style styleclass 这些属性都是用来设置 table 的样式的属性, 这与 HTML 的 table 元素的对应属性是一 样的, 因此在此不再赘述 state 这个属性也是 table 标签的一个很有用属性 该属性有 4 个取值, 分别为 :default notifytodefault persist 和 notifytopersist 这 4 者的描述如下 : default: 不维持任何状态, 此为默认的情况 ; persist: 没有任何参数传入, 将一直维持表的状态 ; notifytodefault: 将一直维持表的状态直到你传入参数告诉它回到 default 状态 ; notifytopersist 状态将一直维持当前状态直到你传入参数告诉它维持 persisted 状态 对于需要维持状态的情况, 一般是将该属性设置为 persist showpagination 该属性用于设置是否显示分页栏和是否需要分页, 默认值为 true 当在 例子中的 userlist.jsp 中的 table 属性添加 :showpagination = "false" 时, 运行效果如图 7 所示 :

13 图 7 不显示分页的效果 从上图可以看出右上角的分页栏 : 已不再显示, 并且记录都是在一个页面显示, 不再分页显示 showstatusbar 该属性用于设置是否显示状态条, 默认值为 true 当在 例子中的 userlist.jsp 中的 table 属性添加 :showstatusbar = "false" 时, 运行效果如图 8 所示 : 图 8 不显示状态栏的显示效果 从上图可以看出, 左上方的 找到 100 条记录, 显示 x 到 y 已经不再显示 showtooltips 该属性用于设置当用户的鼠标移动到某个列头时是否显示提示信息, 默认时值为 true 例如在 例中当用户鼠标移动到用户名这列的列头时, 将显示 排序用户名, 当读者 将 showtooltips 设置为 false 时, 将不会再有这个提示信息 title 该属性用于设置表的上方的显示标题, 例如在 的例子中 userlist.jsp 的 table 标签 添加 title 属性 :title = " 用户列表 ", 显示效果如图 9 所示 :

14 图 9 设置了 title 属性的显示效果 var 表将遍历所有列, 使用 var 属性可以将当前行对应的 bean 从集合传到 page 范围, 因此你可以从 page 范围中重新得到这些数据进行操作 例如将 例子中的 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=" " title=" "/> </ec:row> </ec:table> </body> </html:html>

15 在上例中,var 中定义了列表中遍历时元素的名称, 在下面的列中, 通过 user. 属性名的 方式获取各列的信息 运行效果如图 10 所示 : 图 10 var 属性测试的运行效果 改变 row 标签属性的实例 本小节与 一样, 在 的例子上进行改造 在 中,row 标签使用很简单, 代码如下所示 : <ec:row highlightrow="true"> </ec:row> 在本小节中将通过实例的方式讲述 row 标签的属性 highlightrow 该属性用于高亮显示行, 可取值为 true 或 false, 默认值为 false 设置为 true 时, 当鼠 标移动到某行时将会高亮显示 ( 显示为黄色 ) 如图 11 所示 : 图 11 高亮显示效果 读者将其设置为 false 时, 再次移动到某行, 将不再高亮显示 style styleclass highlightclass 这几个属性用于设置行的样式, 其中 style( 内联样式 ) 和 styleclass( 指定 CSS 类 ) 属 性与 HTML 的 tr 元素的对应属性是一样的, 在此不再赘述 highlightclass 属性用于设置行

16 高亮显示时的 css 类 onclick onmouseover onmouseout 这几个是 JavaScript 属性, 这三者用于对行数据进行动态交互处理 改变 column 标签属性的实例 property 该属性用于指定该列使用的 bean 的属性 当指定的属性 (eg. loginnamex) 不存在时, 将显示为空, 若将 例中的 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 不存在且在列中设置了值时的显示效果 title 该属性的值即为列头显示的值 例如上面各图中的 用户名 和 姓名 等 当该属性 没有设置时,ec 将使用 property 的值作为列头

17 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.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 {

18 @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"/> 此时的运行结果如图 15 所示 : 图 15 扩展 column 标签的 Cell 属性的运行效果 提示 cell 现在是 singleton 并且不再线程安全, 改变的原因是为了 Cell 接口能更简单地被使用 init() 和 destroy() 方法作为 singleton 更灵活但是处于一种混乱的状态 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"/> headercell headercell 属性控制 headers 如何显示, 它和 cell 属性非常相像并且也是实现 Cell 接口 默认 header cell 作为文本显示, 包含排序逻辑 headercell 也允许你定义定制的过滤器, 所有你必须做的就是实现 Cell 接口或者扩展 AbstractCell, 并设置列标签的 Cell 属性为类的全路径 例如, 如果你定制了一个名为 MyCell 的 Cell, 那么你可以像下面一样使用它 : <ec:column property="firstname" headercell="com.mycompany.cell.myheadercell"/>

19 width style styleclass headerstyle headerclass filterstyle 和 filterclass 这几个属性都是用来定义样式的, 如下 : width 用来定义宽度 ; style: 定义列内联的样式 ; styleclass: 定义一个列显示的 css 类 ; headerstyle: 定义 header 的内联的样式 ; headerclass 属性允许你改变 header 列的 css 类 ; filterstyle: 定义 filter 列的内联的样式 ; filterclass 属性允许你改变 filter 列的 css 类 parse 这个属性在讲述 cell 这个属性举例的时候有提到过, 可以用来格式化 Date 对象, 例如 : <ec:column property="gentime" title=" 创建时间 " cell="date" parse="yyyy-mm-dd HH:mm" format="yyyy-mm-dd HH:mm"/> format 这个属性在讲述 cell 这个属性举例的时候有提到过, 可用来格式化日期型或货币型对 象, 下面举一个货币型格式化的例子 : <ec:column property="payroll" cell="currency" format="###,###,##0.00"/> filterable 该属性在讲述 table 标签的时候有提到过, 它用来定义指定的列是不是可过滤的, 不过, 这个列设置为 true 时, 也只能在 table 的该标签为 true 的时候才能其作用 sortable 该属性在讲述 table 标签的时候有提到过, 它用来定义指定的列是不是可排序的, 不过, 这个列设置为 true 时, 也只能在 table 的该标签为 true 的时候才能其作用 calc 和 calctitle 使用举例 : <ec:column property="data" calc="total" calctitle="total:" />

20 calc 属性实现具有唯一方法的 Calc 接口 : public interface Calc { public Number getcalcresult(tablemodel model, Column column); 它传入 model 和 column, 并返回一个 Number 型的值 默认的实现为总计和平均值 为了使用定制的 Calc, 只需要使用 ColumnTag 的 calc 属性来指定实现 Calc 接口的实现类的全路径 提示 Calc 为 singleton 并且不是线程安全的, 因此不要定义任何类变量 viewsallowed viewsallowed 属性指定类允许使用的视图 视图包括 :html pdf xls csv, 以及任何定制的视图 如果指定一个或几个视图, 那么列仅能使用这些指定的视图 例如 : 指定 viewsallowed="pdf", 这意味着这列只允许 PDF 导出, 而不能进行其他格式的导出或 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=" 手机号 "/> <ec:column property="address" title=" 地址 "/> <ec:column property=" " title=" "/> <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 的显示效果

21 viewsdenied viewsdenied 属性指定类不允许使用的视图 视图包括 :html pdf xls csv, 以及任何定制的视图 如果你指定一个或几个视图, 那么列仅这些指定的视图不能被使用 例如 : 你指定 viewsdenied="html", 这意味着这列不允许使用 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=" 用户名 "/> <ec:column property="name" title=" 姓名 " viewsdenied="html"/> <ec:column property="mobile" title=" 手机号 "/> <ec:column property="address" title=" 地址 "/> <ec:column property=" " title=" "/> <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 高级篇 处理参数 ec 能够指定是否处理所有的参数 默认为处理所有的参数, 这意味着当进行过滤 排序 分页时, 所有的参数都被 ec 保存并传到 JSP 中, 这通常是所需要的功能 若只想保存一些特定的参数时, 读者可以通过设置表的 autoincludeparameters 属性值为 false 来到达目的 要传入的参数通过 ec 的 parameter 标签将参数传递过去 下面来看一个例子 :

22 <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> 导出 PDF 若需要使用 ec 的导出功能, 还需要在 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> 本小节讲述一个在 ec 中如何导出 PDF ec 中提供了 exportpdf 标签实现这个功能, 该标签的主要属性如下 : filename 该属性用于定义导出的 PDF 文件的名称, 例如 user.pdf tooltip 用户的鼠标移动到 导出 图标时出现的提示信息, 例如可设置该属性为 : 导出 PDF headercolor 色 定义导出的 PDF 文件中列头的颜色, 例如设置为 blue, 表示将列头的颜色设置为蓝 headerbackgroundcolor 定义导出的 PDF 文件中列头行的背景颜色, 例如设置为 red, 表示将列头行的背景

23 颜色设置为红色 headertitle 设置头行的标题, 例如设置为 : 用户列表 完整实例 本节的子仍然在 中的例子上进行改造,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=" " title=" "/> <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>

24 所示 : 此时运行 : 运行效果如图 18 图 18 导出 PDF 实例的运行效果读者可以看到, 在图 18 的右上方出现了导出 PDF 的图标, 当点击该图标时, 将提示保存 PDF 文件, 打开保存的 PDF 文件, 该文件内容如图 19 所示 : 图 19 PDF 的显示效果从图 19 中可以看出, 生成的 PDF 中存在中文乱码问题, 在这个版本中,XLS 导出时的乱码问题已经解决,PDF 的导出内容乱码问题正在解决中, 不过网上也提出了一些解决方案, 可参见如下两篇文章 : 最新 extremecomponents 包 : 支持 PDF 中文导出 : ( extremecomponents FAQ( 中文版 ) : 导出 Excel 本小节讲述一个在 ec 中如何导出 XLS ec 中提供了 exportxls 标签实现这个功能, 该

25 标签的主要属性如下 : filename 该属性用于定义导出的 Excel 文件的名称, 例如 user.xls tooltip 用户的鼠标移动到 导出 图标时出现的提示信息, 例如可设置该属性为 : 导出 Excel 完整实例 本节的子仍然在 中的例子上进行改造,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=" " title=" "/> <ec:column property="gentime" title=" 创建时间 " cell="date" parse="yyyy-mm-dd HH:mm" format="yyyy-mm-dd HH:mm"/> </ec:row> </ec:table>

26 </body> </html:html> 此时运行 : 运行效果如图 20 所示 : 图 20 导出 Excel 的显示效果 从图 20 中可以看出, 右上方多了一个导出 Excel 的图标, 点击该图标, 可将 Excel 文 件导出到所选择的路径, 导出后的 Excel 文件如图 21 所示 : 图 21 导出 Excel 的显示效果 导出 CSV 本小节讲述一个在 ec 中如何导出 CSV ec 中提供了 exportcsv 标签实现这个功能, 该 标签的主要属性如下 : filename 该属性用于定义导出的 CSV 文件的名称, 例如 user.csv

27 tooltip 用户的鼠标移动到 导出 图标时出现的提示信息, 例如可设置该属性为 : 导出 CSV delimiter 等 该属性用来定义分隔符, 默认的分隔符为逗号 (,), 读者可以自定义分隔符, 例如 完整实例 本节的例子仍然在 中的例子上进行改造,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=" " title=" "/> <ec:column property="gentime" title=" 创建时间 " cell="date" parse="yyyy-mm-dd HH:mm" format="yyyy-mm-dd HH:mm"/> </ec:row> </ec:table>

28 </body> </html:html> 此时运行 : 运行效果如图 22 所示 : 图 22 导出 CSV 的显示效果 从图 22 中可以看出, 右上方多了一个导出 CSV 的图标, 点击该图标, 可将 CSV 文件 导出到所选择的路径, 导出后的 CSV 文件如图 23 所示 : 图 23 导出的 CSV 的显示效果 4. 附录 参考文章 : extremecomponents 参考文档 : extremetable 释疑 : 最新 extremecomponents 包 : 支持 PDF 中文导出 : ( extremecomponents FAQ( 中文版 ) :