当前位置：首页 > news >正文

eXtremeComponents

news 2025/9/16 17:57:16

eXtremeComponents的简单使用

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>