eXtremeComponents

    技术2022-05-12  20

    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>

    将项目发布到tomcat,启动tomcat并访问页面http://localhost:8099/ectable001/ 效果如下图:

    支持鼠标点击表头进行排序,支持关键字搜索,支持EXCel ,PDF ,以及 CSV或者TXT 格式导出


    最新回复(0)