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 導(dǎo)出要用到的包:
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 導(dǎo)出要用到的包:
1、 poi-2.5.1.jar
２、安裝與測(cè)試
下載解壓到的主要文件包括
[1]src源文件
[2]extremecomponents.jar以及其它所依賴的包
[3]tld文件
extremecomponents.tld
[4]一組默認(rèn)樣式及圖片
extremecomponents.css
[5]用以校驗(yàn)安裝的測(cè)試頁面
test.jsp
[6]doc文檔，比較詳細(xì)
快速配置安裝
web app目錄結(jié)構(gòu)
/ROOT
?? /WEB-INF/web.xml
?? ???? /tld/extremecomponents.tld
?????????? /lib
?????????? /classes/extremecomponents.properties
?????????????????? [extremecomponents.properties文件可到source\org\extremecomponents\table\core\中得到]
???? /images/*.jpg [一組默認(rèn)樣式及圖片]
???? /css/extremecomponents.css
???? /test.jsp
???? /index.jsp [用于學(xué)習(xí)以及擴(kuò)展測(cè)試用代碼請(qǐng)見下]
????
web.xml 配置
包括taglib uri 定義以及導(dǎo)出文件filter，由于只是手板功夫,這里就略過了,相關(guān)代碼如下:
<taglib>
<taglib-uri>/tld/extremecomponents</taglib-uri>
<taglib-location>/WEB-INF/tld/extremecomponents.tld</taglib-location>
</taglib>
<filter>
<filter-name>eXtremeExport</filter-name>
<filter-class>org.extremecomponents.table.filter.ExportFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>eXtremeExport</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
配置好所有后，開tomcat，測(cè)試瀏覽http://your_web_app/test.jsp，看到
Congratulations!! You have successfully configured eXtremeTable!
恭喜你，這表示安裝成功！
３、動(dòng)手學(xué)習(xí)這個(gè)taglib
建index.jsp頁面,修改代碼如下
<%@?page?contentType="text/html;charset=GBK"%>
<%@?page?import="java.util.*"%>
<%@?taglib?uri="/tld/extremecomponents"?prefix="ec"?%>
<!--?在本頁要用到j(luò)stl-->
<%@?taglib?prefix="c"?uri="http://java.sun.com/jsp/jstl/core"?%>
<!--使用include的方式-->
<link?rel="stylesheet"?type="text/css"?href="<c:url?value="/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>extremecomponentsResourceBundleLocation</param-name>
???<param-value>com.itorgan.tags.extreme.extremetableResourceBundle</param-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
補(bǔ)充:中文 - > Unicode編碼 可通過反編譯class文件或用native2ascii命令得到 。
然后在table標(biāo)簽中增加locale屬性即可切換
<ec:table
????………………
????………………
????………………
????locale="en_US"
>
<ec:table
????………………
????………………
????………………
????locale="zh_CN"
>
[2] 保留table的上一次狀態(tài)
????? 是指,不管跳轉(zhuǎn)到另一個(gè)后再返回,extremeTable會(huì)將之前的Filter,Sort參數(shù)保存到session中，以至返回看到的頁面還是之前的狀態(tài).
/ec:table
現(xiàn)操作方法:
修改extremecomponents.properties文件
table.useSessionFilterSortParam=foo
saveFilterSort="true" 注意：saveFilterSort="true"不能在properties文件中配置，只能在頁面中設(shè)
新建一頁面用于跳轉(zhuǎn)的頁面 1.jsp
代碼為
<a?href="test.jsp?foo=true">Back</a> /ec:table
ec:table
[3] 樣式修改
基本的HTML結(jié)構(gòu)
<div?class="eXtremeTable"?>
<table?border="0"??cellpadding="0"??cellspacing="0"??width="100%"?>
????<tr>
????????<td?class="title"?><span><!--標(biāo)題--></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"?>
????????????<!--工具欄，包括上一頁，下一頁以及導(dǎo)出-->
????????????</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"?>
????????<!--過濾條件的input框-->
????</tr>
</form>
????<tr>
????????<!--tableHead-->
????</tr>
????<tbody?class="tableBody"?>
????<tr>
????????<!--column-->
????</tr>
????</tbody>
</table>
</div>
extremeTable支持樣式快速切換.可自定的樣式包括column 的td以及table的一些屬性，例如cellpadding等，
另本人發(fā)現(xiàn)，在properties中如下設(shè)置tableHeader的樣式是不行的．不知道是否一個(gè)ＢＵＧ
table.headerClass=itoTableHeader
table.headerSortClass=itoTableHeaderSort
只能繼承一個(gè)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="<c:url?value="/style.css"/>"?TYPE="text/css">
?<ec:table
?collection="goodss"
??? action="${pageContext.request.contextPath}/test.jsp"
??? imagePath="${pageContext.request.contextPath}/images/*.gif"
??? cellpadding="1"
??? title="my bread"
??? saveFilterSort="true"
??? locale="zh_CN"
>
<ec:column property="code" title="編號(hào)" width="100" styleClass="GridTd"/>
<ec:column property="name" title="名稱" width="200" styleClass="GridTd"/>
<ec:column property="status" title="狀態(tài)" width="80" styleClass="GridTd"/>
<ec:column property="born" title="生產(chǎn)日期" width="100" cell="date" format="yyyy-MM-dd" styleClass="GridTd"/>
</ec:table> 效果見下:
![ec[2].jpg](/images/blogjava_net/davidxu/ec[2].jpg)
[4] 實(shí)現(xiàn) table width?自動(dòng)累加
原來的extremeTable 寬度要自己set。不會(huì)自動(dòng)能過下面的column累加。
本人作了個(gè)修改以達(dá)到自動(dòng)累加，省得自己加寫上去：
查看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 當(dāng) column 默認(rèn)使用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已其它c(diǎn)ell
日期格式化： cell = " date " format = " yyyy-MM-dd "
數(shù)字格式化： cell="currency" format="###,###,##0.00"
另外，extremeTable支持自定義cell
在這里我以一個(gè)簡單的例子[以input框的形式出現(xiàn)] 說明如何實(shí)現(xiàn)這一方便的擴(kuò)展
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="編號(hào)"?width="100"?cell="demoInput"?styleClass="GridTd"/> 效果顯示為
當(dāng)然這只是一個(gè)簡單的demo以說明如何自定義cell
如上面你可以簡單的實(shí)現(xiàn)同樣功能
<ec:column?property="code"?title="編號(hào)"?width="100"?styleClass="GridTd">
<input?type="text"?value="${goodss.code}"?name="code_${ROWCOUNT}">
</ec:column>
[6]Extended Attributes
新版本支持Extended Attributes，方便了用戶擴(kuò)展，記得0.9版本時(shí)還要我修改Ｎ個(gè)地方，現(xiàn)在為table,column增加attribute方便多了.
為table增加一個(gè)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")取得這個(gè)值．可以方便擴(kuò)展．
/ec:table
ec:table
[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注冊(cè)中文字體，再修改export view即可解決
[9] Pagination
[10] 其它亮點(diǎn)
A sortable 與 exportable 屬性 ,分別指可否排序,可否導(dǎo)出. 值為 false/true
B 可以直接在<ec:column></e:column>中加html代碼.
??? 并可用{collectionName.objectName}類似的語法取得當(dāng)前object的成員變量值
C? ${ROWCOUNT}可取當(dāng)前row num,是指以1開始計(jì)算?
D/ec:table
ec:table
?ec另一亮點(diǎn)就幫我們寫好了form ,如上代碼:
??????<ec:form name="mainform" action="goods.do"> </ec:form>?設(shè)置form name以及action
參考文檔
http://extremecomponents.org/extremesite/public/documentation.jsp
/ec:table