ectable用法

yan578351314

浏览: 168367 次
性别:
来自: 深圳

最近访客更多访客>>

lon888

wuxiao1982

路人NFTS

shouwang361

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Excel JSP CSS Web .net

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>

<%@ 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;">
&lt;ec:table 
items="pres"
action="${pageContext.request.contextPath}/test.jsp"
imagePath="${pageContext.request.contextPath}/images/table/*.gif"
title="Presidents"
width="60%"
rowsDisplayed="5"
&gt;
&lt;ec:row&gt;
&lt;ec:column property="name"/&gt;
&lt;ec:column property="nickname"/&gt;
&lt;ec:column property="term"/&gt;
&lt;/ec:row&gt;
&lt;/ec:table&gt;
</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>

分享到：

web标签 | UML图

2011-05-25 11:48
浏览 5686
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ectable用法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ectable用法

评论

发表评论

相关推荐

最近访客更多访客>>