【eXtremeComponents总结系列】使用总结(不定期更新中)

【eXtremeComponents总结系列】使用总结(不定期更新中)

     本文请勿转载!
     文中图片没有贴,有兴趣的朋友可从如下网址下载:
     Download

1. 简介

eXtremeComponents(简称ec)是一系列提供高级显示的开源JSP定制标签,当前的包含的组件为eXtremeTable,用于以表形式显示数据。

使用ec需要一定的前提条件,JDK要求1.3或更高的版本,Servlet需要2.3或以上版本。

eXtremeTable在给定的servlet范围(scope)外取得BeansMaps的集合用于JSP页面显示。 servelet范围的搜索顺序是:page, request, sessionapplication。通过设定TableTageitems 属性,eXtremeTable知道哪些需要在servlet范围外被保持。

集合里的Beanspojo,如果使用maps那么它就是键值对。你可以认为每一个bean就是表中的一行数据。 在接下来的文档中,我将使用Beans集合来代替这两种集合。

2. 下载与配置

2.1 下载

       首页:http://www.extremecomponents.org

       下载地址:

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发布的jarjstldcss文件,还包括其源码。其目录结构如图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要求,如下所示:

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导出功能时需要另外添加的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导出功能时需要添加的jar包,该目录下只有一个jar包,即:poi-2.5.1.jar

2.2 配置

要在Web项目中使用ec来进行分页,需要做一些准备工作。

建立名为extremecomponentsWeb工程后,第一步需要dist目录下的ecjar包:extremecomponents-1.0.1.jar拷贝到Web工程的WebRoot/WEB-INF/lib目录,并将相关的依赖包也拷贝到该目录。

接着在WebRoot/WEB-INF目录下建立tld目录来存放tld文件,并将ectld文件extremecomponents.tld(在dist目录下)拷贝到WEB-INF/tld目录。

下一步是在WebRoot目录下建立styles目录,用来存放css样式表文件,并将并将eccss文件extremecomponents.css(在dist目录下)拷贝到WEB-INF/styles目录。

下一步是在WebRoot目录下建立js目录,用来存放js文件,并将并将ecjs文件extremecomponents.js(在dist目录下)拷贝到WEB-INF/js目录。

最后是拷贝图片,将images(该目录包括了ec所需的全部图片)整个目录拷贝到WebRoot目录下即可。

3. 使用举例

3.1 初级篇

3.1.1最简语句实例

       本例讲解ec进行分页的一个最简单的例子,在该例子中,显示一个用户列表,用户列表中有若干User对象,每个User对象有loginName(用户名)、name(姓名)、mobile(手机号)、address(地址)、emailEmail)这五个属性。

       首先读者需要在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.amigo;

import java.util.Date;

/**

 * 用户对象.

 */

public class User {

         /** 用户名.*/

         private String loginName;

         /** 姓名. */

         private String name;

         /** 手机号. */

         private String mobile;

         /** 地址. */

         private String address;

         /** Email.*/

         private String email;

         /** 创建时间. */

         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

       该类为业务逻辑类,提供一个获取用户列表的方法,为了减少例子的复杂性,用户列表不从数据库中获取。该类的代码如下所示:

package com.amigo;

import java.util.ArrayList;

import java.util.List;

/**

 * 用户管理业务逻辑类.

 */

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 + "@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类,调用业务逻辑类的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();

    /**

     * 调用业务逻辑类获取用户信息列表.

     * @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后,访问地址:

       http://localhost:8080/extremecomponents/viewUserList.do,该例的运行效果如图5所示:

5   最简语句实例运行效果

       从上图可以看出,默认情况下,没页的记录条数为15ec会根据实际情况决定“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标签用来设定什么被显示并且如何进行显示。默认的ecservlet范围寻找具有名称和items属性设置相同的Beans集合。 在上例中只是用到了table标签的itemsactionimagePathlocale属性,在本节中将对该标签的所有属性进行详细讲述。

3.1.2.1 items

       该属性用于表示Beans集合,表示的是取回的集合数据的引用。例如在3.1.1的例子中的userList是在Action中放入到request中的,当然这个属性还可以放入到pagesessionapplication范围内,不过ec查找该属性的顺序是按照page -> request -> session -> application的顺序的。

       放入的属性可以为继承java.util.Collection的任何类,在3.1.1的例子中java.util.List类就是继承该类的。集合中的元素一般是普通的javabean或者Map。下面演示一个列表元素为Map类型对象的例子,演示时只需要将3.1.1的例子中的内容修改成如下内容即可:

package com.amigo;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

/**

 * 用户管理业务逻辑类.

 */

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 + "@126.com");

                            map.put("loginName", "amigo" + i);

                            map.put("mobile", "136666666" + i);

                            map.put("name", "阿蜜果" + i);

                            list.add(map);

                   }

                   return list;

         }

}

       此时在输入地址:http://localhost:8080/extremecomponents/viewUserList.do,可看到运行效果同3.1.1的例子是一样的。

3.1.2.2 action

       该属性用于指定翻页、导出、查询请请求时定向的路径,在3.1.1action属性的值为:${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修改成:

<ec:table

                            items="userList"

                            action="${pageContext.request.contextPath}/viewUserList.do"

                            imagePath="${pageContext.request.contextPath}/images/table/*.gif"

                      locale = "zh_CN"

                            rowsDisplayed = "50"

                            >

       此时的运行效果如图6所示:

6   rowDisplayed50时的运行结果

3.1.2.7 cellspacingcellpaddingborderwidthstylestyleClass

       这些属性都是用来设置table的样式的属性,这与HTMLtable元素的对应属性是一样的,因此在此不再赘述。

3.1.2.8 state

       这个属性也是table标签的一个很有用属性。

该属性有4个取值,分别为:defaultnotifyToDefaultpersistnotifyToPersist。这4者的描述如下:

l         default:不维持任何状态,此为默认的情况;

l         persist:没有任何参数传入,将一直维持表的状态;

l         notifyToDefault:将一直维持表的状态直到你传入参数告诉它回到default状态;

l         notifyToPersist状态将一直维持当前状态直到你传入参数告诉它维持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.jsptable标签添加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">

……

</ec:row>

在本小节中将通过实例的方式讲述row标签的属性。

3.1.3.1 highlightRow

       该属性用于高亮显示行,可取值为truefalse,默认值为false。设置为true时,当鼠标移动到某行时将会高亮显示(显示为黄色)。如图11所示:

11 高亮显示效果

       读者将其设置为false时,再次移动到某行,将不再高亮显示。

3.1.3.2 stylestyleClasshighlightClass

       这几个属性用于设置行的样式,其中style(内联样式)和styleClass(指定CSS类)属性与HTMLtr元素的对应属性是一样的,在此不再赘述。highlightClass属性用于设置行高亮显示时的css类。

3.1.3.3 onclickonmouseoveronmouseout

       这几个是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显示或导出而返回格式化值的对象。 发行包包含的CellDisplayCellDateCell NumberCellRowCountCell DisplayCell是仅仅显示列值的默认cellDateCell使用parse属性(可选)和format属性来格式化对应的属性值; NumberCell使用format属性来格式化对应的属性值;RowCountCell显示当前行。

       下面来看一个DateCell使用的例子,读者可以在userList.jsp中加上创建时间(genTime)这一列,并在UserManageBean类增加这一列(为Map时):

map.put("genTime", (new Date()).toString());

并将Mapnew语句改成:

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"/>

       此时访问:http://localhost:8080/extremecomponents/viewUserList.do,运行效果如图14所示:

14   columncell属性设置为date的运行效果

       读者也可以对columncell属性进行扩展,扩展类只需要继承抽象类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 {

         @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更灵活但是处于一种混乱的状态。

3.1.4.4 filterCell

       filterCell属性用于控制过滤器如何显示,它和cell属性非常相像并且也是实现Cell接口。有效值有filterdroplist,默认值为filter。当然读者也可以在这个基础上进行扩展,只需要指明确切的列名即可。

读者可以将loginName这一列的增加filterCell属性,并将其值设置为为droplist

       filterCell也允许你定义定制的过滤器,所有你必须做的就是实现Cell接口或者扩展AbstractCell 并设置列标签的Cell属性为类的全路径。例如,如果你定制了一个名为MyCellCell,那么你可以像下面一样使用它:

<ec:column property="firstName" filterCell="com.mycompany.cell.MyFilterCell"/>

3.1.4.5 headerCell

headerCell属性控制headers如何显示,它和cell属性非常相像并且也是实现Cell接口。 默认header cell作为文本显示,包含排序逻辑。

headerCell也允许你定义定制的过滤器,所有你必须做的就是实现Cell接口或者扩展AbstractCell 并设置列标签的Cell属性为类的全路径。例如,如果你定制了一个名为MyCellCell,那么你可以像下面一样使用它:

<ec:column property="firstName" headerCell="com.mycompany.cell.MyHeaderCell"/>

3.1.4.6 widthstylestyleClassheaderStyleheaderClassfilterStylefilterClass

这几个属性都是用来定义样式的,如下:

l         width用来定义宽度;

l         style:定义列内联的样式;

l         styleClass:定义一个列显示的css类;

l         headerStyle:定义header的内联的样式;

l         headerClass属性允许你改变header列的css类;

l         filterStyle:定义filter列的内联的样式;

l         filterClass属性允许你改变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 calccalcTitle

       使用举例:

<ec:column property="data" calc="total" calcTitle="Total:" />

calc属性实现具有唯一方法的Calc接口:

public interface Calc {

public Number getCalcResult(TableModel model, Column column);

}

它传入modelcolumn,并返回一个Number型的值。默认的实现为总计和平均值。

为了使用定制的Calc,只需要使用ColumnTagcalc属性来指定实现Calc接口的实现类的 全路径。

【提示】Calcsingleton并且不是线程安全的,因此不要定义任何类变量。

3.1.4.12 viewsAllowed

viewsAllowed属性指定类允许使用的视图。视图包括:htmlpdfxlscsv,以及任何定制的视图。 如果指定一个或几个视图,那么列仅能使用这些指定的视图。例如:指定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="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属性指定类不允许使用的视图。视图包括:htmlpdfxlscsv,以及任何定制的视图。 如果你指定一个或几个视图,那么列仅这些指定的视图不能被使用。例如:你指定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="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来到达目的。

要传入的参数通过ecparameter标签将参数传递过去。下面来看一个例子:

<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>

                   <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中如何导出PDFec中提供了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>

       此时运行:http://localhost:8080/extremecomponents/viewUserList.do,运行效果如图18所示:

18   导出PDF实例的运行效果

       读者可以看到,在图18的右上方出现了导出PDF的图标,当点击该图标时,将提示保存PDF文件,打开保存的PDF文件,该文件内容如图19所示:

19   PDF的显示效果

       从图19中可以看出,生成的PDF中存在中文乱码问题,在这个版本中,XLS导出时的乱码问题已经解决,PDF的导出内容乱码问题正在解决中,不过网上也提出了一些解决方案,可参见如下两篇文章:

最新eXtremeComponents包:支持 PDF中文导出》:

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导出Excel

本小节讲述一个在ec中如何导出XLSec中提供了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>

       此时运行:http://localhost:8080/extremecomponents/viewUserList.do,运行效果如图20所示:

20 导出Excel的显示效果

       从图20中可以看出,右上方多了一个导出Excel的图标,点击该图标,可将Excel文件导出到所选择的路径,导出后的Excel文件如图21所示:

21 导出Excel的显示效果

3.2.4导出CSV

本小节讲述一个在ec中如何导出CSVec中提供了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>

       此时运行:http://localhost:8080/extremecomponents/viewUserList.do,运行效果如图22所示:

22 导出CSV的显示效果

       从图22中可以看出,右上方多了一个导出CSV的图标,点击该图标,可将CSV文件导出到所选择的路径,导出后的CSV文件如图23所示:

23 导出的CSV的显示效果

4. 附录

参考文章:

eXtremeComponents参考文档》:

http://www.blogjava.net/lucky/articles/33380.html

extremeTable释疑》:

http://blog.csdn.net/pangpangde/archive/2006/07/13/913326.aspx

最新eXtremeComponents包:支持 PDF中文导出》:

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/

你可能感兴趣的:(【eXtremeComponents总结系列】使用总结(不定期更新中))