ectable用法
eXtremeComponents 用法
http://www.blogjava.net/amigoxie/archive/2008/01/08/173526.html 这里也是介绍此标签的用法
Extreme Table 是ExtremeCompontents（Home Page: http://www.extremecomponents.org? ）中一个功能强大 而又容易配置,扩展,自定义的Table 控件，其功能包括排序, 分页, 导出Excel, pdf和汇总。
2。基本配制：
1)首先下载发行包 http://sourceforge.net/projects/extremecomp;
2)将包内的extremecomponents.jar 文件拷贝到项目的 WEB-INF/lib 目录中
3)将 dist 目录中的 extremecomponents.tld 文件拷贝到tld/ 中
4)将 test 目录中的 test.jsp 文件拷贝到 webroot目录中 (测试用Demo)
5)将 images 文件夹拷贝到 webroot目录中
6)将 extremecomponents.css 拷贝到 webroot/css目录中
7)在/source/org/extremecomponents/table/core目录找到extremetable.properties文件,
把它复制到src/conf里面并进行修改(ExtremeTable支持在properties文件里方便的统一配置丰富的全局属性).
官方的war包中的test.jsp文件有需要修改的地方.
第一处<%@ taglib uri="/tld/extremecomponents.tld" prefix="ec" %>
为了显示中文还需要加入:
<%@page pageEncoding="gb2312"
contentType="text/html; charset=gb2312"%>
由于官方的测试文件非常基础.
下面扩展两个倒出文件的方法.
<ec:exportPdf
fileName="output.pdf"
tooltip="Export PDF"
headerColor="black"
headerBackgroundColor="#b6c2da"
headerTitle="Presidents测试"/>
<ec:exportXls
fileName="test.xls"
tooltip="EXECL"
text="XLS"/>
直接添加在<table>标签范围内就好了.
最重要的是下面...需要在web.xml里加入些代码
<context-param>
<param-name>extremecomponentsPreferencesLocation</param-name>
<param-value>/extremetable.properties</param-value>
</context-param>
==============如果不写以下这些是无法导出文件的..^_^========
<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>
http://www.blogjava.net/amigoxie/archive/2008/01/08/173526.html 这里也是介绍此标签的用法
Extreme Table 是ExtremeCompontents（Home Page: http://www.extremecomponents.org? ）中一个功能强大 而又容易配置,扩展,自定义的Table 控件，其功能包括排序, 分页, 导出Excel, pdf和汇总。
2。基本配制：
1)首先下载发行包 http://sourceforge.net/projects/extremecomp;
2)将包内的extremecomponents.jar 文件拷贝到项目的 WEB-INF/lib 目录中
3)将 dist 目录中的 extremecomponents.tld 文件拷贝到tld/ 中
4)将 test 目录中的 test.jsp 文件拷贝到 webroot目录中 (测试用Demo)
5)将 images 文件夹拷贝到 webroot目录中
6)将 extremecomponents.css 拷贝到 webroot/css目录中
7)在/source/org/extremecomponents/table/core目录找到extremetable.properties文件,
把它复制到src/conf里面并进行修改(ExtremeTable支持在properties文件里方便的统一配置丰富的全局属性).
官方的war包中的test.jsp文件有需要修改的地方.
第一处<%@ taglib uri="/tld/extremecomponents.tld" prefix="ec" %>
为了显示中文还需要加入:
<%@page pageEncoding="gb2312"
contentType="text/html; charset=gb2312"%>
由于官方的测试文件非常基础.
下面扩展两个倒出文件的方法.
<ec:exportPdf
fileName="output.pdf"
tooltip="Export PDF"
headerColor="black"
headerBackgroundColor="#b6c2da"
headerTitle="Presidents测试"/>
<ec:exportXls
fileName="test.xls"
tooltip="EXECL"
text="XLS"/>
直接添加在<table>标签范围内就好了.
最重要的是下面...需要在web.xml里加入些代码
<context-param>
<param-name>extremecomponentsPreferencesLocation</param-name>
<param-value>/extremetable.properties</param-value>
</context-param>
==============如果不写以下这些是无法导出文件的..^_^========
<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>
<%@ taglib uri="/tld/extremecomponents.tld" prefix="ec" %>
<%@page pageEncoding="gb2312"
contentType="text/html; charset=gb2312"%>
<html>
<head>
<title>eXtremeTest</title>
<style type="text/css">
.eXtremeTable {
margin: 0;
padding: 0;
}
.eXtremeTable select {
font-family: Verdana;
font-size: 9px;
border: solid 1px #EEE;
width: 75px;
}
.eXtremeTable .tableRegion {
border: 1px solid silver;
padding: 2px;
font-family:Verdana;
font-size: 10px;
margin-top: 7px;
}
.eXtremeTable .filter {
background-color: #efefef;
}
.eXtremeTable .filter input {
font-family: Verdana;
font-size: 10px;
width: 100%;
}
.eXtremeTable .filter select {
font-family: Verdana;
font-size: 9px;
border: solid 1px #EEE;
width: 100%;
}
.eXtremeTable .tableHeader {
background-color: #308dbb;
color: white;
font-family:Verdana;
font-size: 11px;
font-weight: bold;
text-align: left;
padding-right: 3px;
padding-left: 3px;
padding-top: 4;
padding-bottom: 4;
margin: 0;
border-right-style: solid;
border-right-width: 1px;
border-color: white;
}
.eXtremeTable .tableHeaderSort {
background-color: #3a95c2;
color: white;
font-family:Verdana;
font-size: 11px;
font-weight: bold;
text-align: left;
padding-right: 3px;
padding-left: 3px;
padding-top: 4;
padding-bottom: 4;
border-right-style: solid;
border-right-width: 1px;
border-color: white;
}
.eXtremeTable .odd a, .even a {
color: Black;
font-size: 10px;
}
.eXtremeTable .odd td, .eXtremeTable .even td {
padding-top: 2px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 3px;
vertical-align: middle;
font-family:Verdana;
font-size: 10px;
}
.eXtremeTable .odd {
background-color: #FFFFFF;
}
.eXtremeTable .even {
background-color: #dfe4e8;
}
.eXtremeTable .highlight td {
color: black;
font-size: 10px;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 3px;
vertical-align: middle;
background-color: #fdecae;
}
.eXtremeTable .highlight a, .highlight a {
color: black;
font-size: 10px;
}
.eXtremeTable .toolbar {
background-color: #F4F4F4;
font-family:Verdana;
font-size: 9px;
margin-right: 1px;
border-right: 1px solid silver;
border-left: 1px solid silver;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}
.eXtremeTable .toolbar td {
color: #444444;
padding: 0px 3px 0px 3px;
text-align:center;
}
.eXtremeTable .separator {
width: 7px;
}
.eXtremeTable .statusBar {
background-color: #F4F4F4;
font-family:Verdana;
font-size: 10px;
}
.eXtremeTable .filterButtons {
background-color: #efefef;
text-align: right;
}
.eXtremeTable .title {
color: #444444;
font-weight: bold;
font-family:Verdana;
font-size: 15px;
vertical-align: middle;
}
.eXtremeTable .title span {
margin-left: 7px;
}
.eXtremeTable .formButtons {
display: block;
margin-top: 10px;
margin-left: 5px;
}
.eXtremeTable .formButton {
cursor: pointer;
font-family:Verdana;
font-size:10px;
font-weight: bold;
background-color: #308dbb;
color: white;
margin-top: 5px;
border: outset 1px #333;
vertical-align: middle;
}
.eXtremeTable .tableTotal {
background-color: #FFFFFF;
border-top: solid 1px Silver;
}
.eXtremeTable .tableTotalEmpty {
background-color: #FFFFFF;
}
</style>
</head>
<% 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", "哈哈哈"); %>
<% 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); %>
<body style="margin:25px;">
<p style="font-family: Verdana;font-size:14px;">
Congratulations!! You have successfully configured eXtremeTable!
</p>
<br>
<ec:table
items="pres"
action="${pageContext.request.contextPath}/test.jsp"
imagePath="${pageContext.request.contextPath}/images/table/*.gif"
title="Presidents"
width="60%"
rowsDisplayed="5"
>
<ec:exportPdf
fileName="output.pdf"
tooltip="Export PDF"
headerColor="black"
headerBackgroundColor="#b6c2da"
headerTitle="Presidents测试"/>
<ec:exportXls
fileName="test.xls"
tooltip="EXECL"
text="XLS"/>
<ec:row highlightRow="true">
<ec:column property="name"/>
<ec:column property="nickname"/>
<ec:column property="term"/>
</ec:row>
</ec:table>
<br>
<p style="font-family:Verdana;font-size:12px">
Below is the code that generates the above display.
</p>
<pre class="bodyText" style="background-color:#eee;padding:2px;width:60%;font-family: Verdana;font-size:11px;">
<ec:table
items="pres"
action="${pageContext.request.contextPath}/test.jsp"
imagePath="${pageContext.request.contextPath}/images/table/*.gif"
title="Presidents"
width="60%"
rowsDisplayed="5"
>
<ec:row>
<ec:column property="name"/>
<ec:column property="nickname"/>
<ec:column property="term"/>
</ec:row>
</ec:table>
</pre>
<br>
<p style="font-family:Verdana;font-size:11px;width:500px">
Note: if you are not seeing any images then be sure to include the images included with the distribution.
This example assumes that the images are in an /images/table/ directory. You can see this by looking at the
imagePath attribute on the eXtremeTable example. If your images are somewhere else then just adjust the
imagePath.
</p>
</body>
</html>