1、何为 extremetable,又一个开源taglib
extremetable,开源的jsp 自定义标签,以表格的形式显示数据,当前最新版本为 .
它是一个类似display tag,valuelist 等开源产品.
homepage:
download:
开源产品作者:
jeff johnston ,现居住美国,圣路易斯.
六年web应用软件开发经验,extremecomponents最初的创建者. 负责设计及大部分的编码。
其它还包括paul horn ,extremetree的技术设计, 以及大部分的编码;
dave goodin,brad parks等.
主要特色
1、导出excel以及pdf无需再另写jsp(这个基本与valuelist作比较,因为以前用valuelist的时候每写一个table都要再写一个excel.jsp)
2、扩展性比较强,基本上想怎样改就怎样改,对jar影响比较少。
3、另外据官方声称有以下四点
fast ( 本人曾小测一次,三千纪录情况下,效率基本与valuelist持平)
efficient
easy ( 得确很容易使用与理解加扩展)
reliable
安装要求
1、servlet 2.3 或更高
2、 jdk 1.3.1 或更高
最小的jars需求
1、commons-beanutils 1.6
2、commons-collections 3.0
3、 commons-lang 2.0
4、 commons-logging 1.0.4
5、 standard 1.0.2
pdf 导出要用到的包:
1、 avalon-framework 4.0
2、batik 1.5-fop-0.20-5
3、 fop 0.20.5
4、 xalan 2.5.1
5、 xercesimpl 2.6.1
6、 xml-apis 2.0.2
xls 导出要用到的包:
1、 poi-2.5.1.jar
2、安装与测试
下载解压到的主要文件包括
[1]src源文件
[2]extremecomponents.jar以及其它所依赖的包
[3]tld文件
extremecomponents.tld
[4]一组默认样式及图片
extremecomponents.css
[5]用以校验安装的测试页面
test.jsp
[6]doc文档,比较详细
快速配置安装
web app目录结构
/root
/web-inf/web.xml
/tld/extremecomponents.tld
/lib
/classes/extremecomponents.properties
[extremecomponents.properties文件可到source\org\extremecomponents\table\core\中得到]
/images/*.jpg [一组默认样式及图片]
/css/extremecomponents.css
/test.jsp
/index.jsp [用于学习以及扩展测试用代码请见下]
web.xml 配置
包括taglib uri 定义以及导出文件filter,由于只是手板功夫,这里就略过了,相关代码如下:
<taglib>
<taglib-uri>/tld/extremecomponentstaglib-uri>
<taglib-location>/web-inf/tld/extremecomponents.tldtaglib-location>
taglib>
<filter>
<filter-name>extremeexportfilter-name>
<filter-class>org.extremecomponents.table.filter.exportfilterfilter-class>
filter>
<filter-mapping>
<filter-name>extremeexportfilter-name>
<url-pattern>/*url-pattern>
filter-mapping>
配置好所有后,开tomcat,测试浏览,看到
congratulations!! you have successfully configured extremetable!
恭喜你,这表示安装成功!
3、动手学习这个taglib
建index.jsp页面,修改代码如下
<%@ page contenttype="text/html;charset=gbk"%>
<%@ page import="java.util.*"%>
<%@ taglib uri="/tld/extremecomponents" prefix="ec" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" type="text/css" href=""/extremecomponents.css"/>">
<%
list goodss = new arraylist();
for (int i = 1; i <= 10; i)
{
map goods = new java.util.hashmap();
goods.put("code", "a00"i);
goods.put("name", "面包"i);
goods.put("status", "a:valid");
goods.put("born", new date());
goodss.add(goods);
}
request.setattribute("goodss", goodss);
%>
<ec:table
collection="goodss"
action="${pagecontext.request.contextpath}/test.jsp"
imagepath="${pagecontext.request.contextpath}/images/*.gif"
cellpadding="1"
title="my bread">
<ec:column property="code"/>
<ec:column property="name"/>
<ec:column property="status"/>
<ec:column property="born" cell="date" format="yyyy-mm-dd"/>
ec:table>
效果如下:
[1] 1.0.1-m1 版支持国际化
修改web.xml文件增加
<context-param>
<param-name>extremecomponentsresourcebundlelocationparam-name>
<param-value>com.itorgan.tags.extreme.extremetableresourcebundleparam-value>
context-param>
意指到 com.itorgan.tags.extreme 下找 extremetableresourcebundle_[language]_[country].properties 文件
extremetableresourcebundle_en_us.properties代码如下
table.statusbar.resultsfound={0} results found, displaying {1} to {2}
table.statusbar.noresultsfound=there were no results found.
table.toolbar.showall=show all
extremetableresourcebundle_zh_cn.properties如下.
table.statusbar.resultsfound={0} \u6761\u7eaa\u5f55\u7b26\u5408\u6761\u4ef6, \u73b0\u5728\u662f\u7b2c {1} \u81f3 {2} \u6761\u7eaa\u5f55
table.statusbar.noresultsfound=\u6ca1\u6709\u8981\u67e5\u8be2\u7684\u7eaa\u5f55\u3002
table.toolbar.showall=\u6240 \u6709
补充:中文 - > unicode编码 可通过反编译class文件或用native2ascii命令得到 。
然后在table标签中增加locale属性即可切换
<ec:table
………………
………………
………………
locale="en_us"
>
<ec:table
………………
………………
………………
locale="zh_cn"
>
[2] 保留table的上一次状态
是指,不管跳转到另一个后再返回,extremetable会将之前的filter,sort参数保存到session中,以至返回看到的页面还是之前的状态.
实现操作方法:
修改extremecomponents.properties文件
table.usesessionfiltersortparam=foo
savefiltersort="true" 注意:savefiltersort="true"不能在properties文件中配置,只能在页面中设
新建一页面用于跳转的页面 1.jsp
代码为
<a href="test.jsp?foo=true">backa>
[3] 样式修改
基本的html结构
<div class="extremetable" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td class="title" ><span>span>td>
<td align="right" >
<table border="0" cellpadding="0" cellspacing="1" class="toolbar" >
<tr>
<form name="pres_toolbar" action="/extremesite/public/demo/presidents.jsp" >
tr>
<tr>
form>
tr>
table>
td>
tr>
table>
<table id="pres" border="0" cellspacing="2" cellpadding="0" width="100%" class="tableregion" >
<tr>
<td colspan="6" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td class="statusbar" >43 results found, displaying 1 to 12 td>
<td class="filterbuttons" >td>
tr>
table>
td>
tr>
<form name="pres_filter" action="/extremesite/public/demo/presidents.jsp" >
<tr class="filter" id="filter" >
tr>
form>
<tr>
tr>
<tbody class="tablebody" >
<tr>
tr>
tbody>
table>
div>
extremetable支持样式快速切换.可自定的样式包括column 的td以及table的一些属性,例如cellpadding等,
另本人发现,在properties中如下设置tableheader的样式是不行的.不知道是否一个bug
table.headerclass=itotableheader
table.headersortclass=itotableheadersort
只能继承一个headercell
public class headercell extends org.extremecomponents.table.cell.headercell
{
public final static string table_header = "itotableheader";
public final static string table_header_sort = "itotableheadersort";
}
新的样式代码:
<link rel="stylesheet" href=""/style.css"/>" type="text/css">
collection="goodss"
action="${pagecontext.request.contextpath}/test.jsp"
imagepath="${pagecontext.request.contextpath}/images/*.gif"
cellpadding="1"
title="my bread"
savefiltersort="true"
locale="zh_cn"
>
效果见下:
[4] 实现 table width 自动累加
原来的extremetable 宽度要自己set。不会自动能过下面的column累加。
本人作了个修改以达到自动累加,省得自己加写上去:
查看htmlview.java 两处地方
toolbarplacement
tablestart可见两处地方要修改的
[5] custom cell
在properties文件中我们可观察到:
table.cell_=display
table.cell_currency=org.extremecomponents.table.cell.numbercell
table.cell_number=org.extremecomponents.table.cell.numbercell
table.cell_display=org.extremecomponents.table.cell.displaycell
table.cell_date=org.extremecomponents.table.cell.datecell
当 column 默认使用org.extremecomponents.table.cell.displaycell
public class displaycell extends basecell {
public string html() {
htmlbuilder html = new htmlbuilder();
html.append(starttd());
object value = column.getvalue();
if (value != null && stringutils.isnotempty(value.tostring())) {
html.append(value);
} else {
html.append(" ");
}
html.append(endtd());
return html.tostring();
}
}
ec已其它cell
日期格式化: cell = " date " format = " yyyy-mm-dd "
数字格式化: cell="currency" format="###,###,##0.00"
另外,extremetable支持自定义cell
在这里我以一个简单的例子[以input框的形式出现] 说明如何实现这一方便的扩展
public class demoinput extends basecell
{
public string html()
{
integer rownum = rowcount;
htmlbuilder html = new htmlbuilder();
html.append(starttd());
object value = column.getvalue();
htmlbuilder input = new htmlbuilder();
input.input("text");
input.name(column.getproperty() "_" rownum);
input.value(value.tostring());
input.close();
html.append(input.tostring());
html.append(endtd());
return html.tostring();
}
}
properties文件增加
table.cell_demoinput =org.extremecomponents.table.cell.demoinput
jsp代码
<ec:column property="code" title="编号" width="100" cell="demoinput" styleclass="gridtd"/>
效果显示为
当然这只是一个简单的demo以说明如何自定义cell
如上面你可以简单的实现同样功能
<ec:column property="code" title="编号" width="100" styleclass="gridtd">
<input type="text" value="${goodss.code}" name="code_${rowcount}">
ec:column>
[6]extended attributes
新版本支持extended attributes,方便了用户扩展,记得0.9版本时还要我修改n个地方,现在为table,column增加attribute方便多了.
为table增加一个height的属性
public class tabletag extends org.extremecomponents.table.tag.tabletag
{
//div 的高度
private string height;
public string getheight()
{
return height;
}
public void setheight(string height)
{
this.height = height;
}
public void addextendedattributes(attributes attributes)
{
attributes.addattribute("height", getheight());
}
/**//**
* set the new attribuer to null - by ito
*/
public void release()
{
super.release();
height = null;
}
}
然后就可以通过
model.gettablehandler().gettable().getattribute("height")取得这个值.可以方便扩展.
[7] 解决excel中文问题
继承xlsview.java
private void body(basemodel model, column column, boolean isfirstcolumn, boolean islastcolumn) {
//原来的代码略
hssfcell.setencoding(hssfcell.encoding_utf_16); //解决中文乱码
//原来的代码略
}
private void createheader(basemodel model) {
//原来的代码略
hssfcell.setencoding(hssfcell.encoding_utf_16); //解决中文乱码
//原来的代码略
}
[8] 解决pdf中文问题
帮pof注册中文字体,再修改export view即可解决
[9] pagination
[10] 其它亮点
a sortable 与 exportable 属性 ,分别指可否排序,可否导出. 值为 false/true
b 可以直接在中加html代码.
并可用{collectionname.objectname}类似的语法取得当前object的成员变量值
c ${rowcount}可取当前row num,是指以1开始计算
d ec另一亮点就帮我们写好了form ,如上代码:
设置form name以及action
参考文档