1、 eXtremeComponents是一个很不错的页面展示组件,
功能最强大而又容易配置、扩展、自定义的Table 控件,比DisplayTag要优秀一些。常用的功能包括排序、分页、导出Excel, pdf和汇总。
其主页
http://code.google.com/p/extremetable/ ,在这里可以下载到最新版本
下载完成之后是一个8.88M的zip文件,
解压缩之后:
2、 接下来看看如何使用,新建 WEB项目ectable001 ,编译路径WebRoot/WEB-INF/classes,页面根目录WebRoot.
接下来,
(1)先把extremecomponents文件夹下lib的 minimum、xls、pdf的所有jar文件拷贝到web应用的WEB-INF/lib下。如果不使用Excel, pdf导出功能,那么xls、pdf下的jar文件就不用拷贝;还有dist下extremecomponents的核心jar包;
(2)把extremecomponents文件夹下images拷贝到web应用的根目录下;
(3)把extremecomponents的extremecomponents.tld 拷贝到WEB-INF/tld;
(4)在WebRoot下新建文件夹css,将extremecomponents.css文件拷贝到该文件夹;
(5)修改web.xml,为了使用导出功能,只需要在web.xml文件中加入eXtremeComponents的导出过滤器的配置,内容如下
<filter> <filter-name>eXtremeExport</filter-name> <filter-class>org.extremecomponents.table.filter.ExportFilter</filter-class> <init-param> <param-name>responseHeadersSetBeforeDoFilter</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>eXtremeExport</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
经过上面5步的配置,我们就可以在页面上使用ec标签了,
在WebRoot下新建jsp文件index.jsp ,内容如下:
<?xml version="1.0" encoding="UTF-8" ?> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="WEB-INF/extremecomponents.tld" prefix="ec" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <link rel="stylesheet" href="css/extremecomponents.css" type="text/css" />
<% java.util.List presidents = new java.util.ArrayList(); java.util.Map president = new java.util.HashMap(); president.put("name", "George Washington"); president.put("nickname", "Father of His Country"); president.put("term", "1789-1797"); presidents.add(president);
president = new java.util.HashMap(); president.put("name", "John Adams"); president.put("nickname", "Atlas of Independence"); president.put("term", "1797-1801"); presidents.add(president);
president = new java.util.HashMap(); president.put("name", "Thomas Jefferson"); president.put("nickname", "Man of the People, Sage of Monticello"); president.put("term", "1801-09"); presidents.add(president);
president = new java.util.HashMap(); president.put("name", "James Madison"); president.put("nickname", "Father of the Constitution"); president.put("term", "1809-17"); presidents.add(president);
president = new java.util.HashMap(); president.put("name", "James Monroe"); president.put("nickname", "The Last Cocked Hat, Era-of-Good-Feelings President"); president.put("term", "1817-25"); presidents.add(president);
president = new java.util.HashMap(); president.put("name", "John Adams"); president.put("nickname", "Old Man Eloquent"); president.put("term", "1825-29"); presidents.add(president);
request.setAttribute("pres", presidents); %> </head> <body> <ec:table items="pres" action="${pageContext.request.contextPath}/index.jsp" imagePath="${pageContext.request.contextPath}/images/*.gif" title="Presidents" width="60%" rowsDisplayed="5" > <ec:exportXls fileName="UserList.xls" tooltip="Export Excel"/> <ec:exportPdf fileName="UserList.pdf" tooltip="输出PDF文件" headerColor="blue" headerBackgroundColor="blue" headerTitle="人员表"/> <ec:exportCsv fileName="用户列表导出.csv" tooltip="输出CSV文件" delimiter="|"/> <ec:row> <ec:column property="name"/> <ec:column property="nickname"/> <ec:column property="term"/> </ec:row> </ec:table> </body> </html>
将项目发布到tomcat,启动tomcat并访问页面http://localhost:8099/ectable001/ 效果如下图:
支持鼠标点击表头进行排序,支持关键字搜索,支持EXCel ,PDF ,以及 CSV或者TXT 格式导出