ectable用法

eXtremeComponents 用法
http://www.blogjava.net/amigoxie/archive/2008/01/08/173526.html 这里也是介绍此标签的用法

Extreme Table 是ExtremeCompontents(Home Page:[url]http://www.extremecomponents.org?[/url] )中一个功能强大 而又容易配置,扩展,自定义的Table 控件,其功能包括排序, 分页, 导出Excel, pdf和汇总。

2。基本配制:
1)首先下载发行包 [url]http://sourceforge.net/projects/extremecomp;[/url]
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>

[code]<%@ 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>[/code]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值