extremetable
[1] 1.0.1-M1 版支持国际化
修改web.xml文件增加
< 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
补充:中文 - > Unicode编码 可通过反编译class文件或用native2ascii命令得到 。
然后在table标签中增加locale属性即可切换<ec:table
<ec:table
………………
………………
………………
locale = " en_US "
>
< ec:table
………………
………………
………………
locale = " zh_CN "
>
[2] 保留table的上一次状态
是指,不管跳转到另一个后再返回,extremeTable会将之前的Filter,Sort参数保存到session中，以至返回看到的页面还是之前的状态.<ec:table
<ec:table
<ec:table
</ec:table
</ec:table
</ec:table
实现操作方法:
修改extremecomponents.properties文件
table.useSessionFilterSortParam=foo
saveFilterSort="true" 注意：saveFilterSort="true"不能在properties文件中配置，只能在页面中设
<ec:table
……………………
saveFilterSort = " true "
/ ec:table >
< a href = " 1.jsp " > 跳到 </ a >
新建一页面用于跳转的页面 1.jsp
代码为
</ec:table
</ec:table
</ec:table
<ec:table
<ec:table
<ec:table
[3] 样式修改
基本的HTML结构
< 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" >
<!--过滤条件的input框 -->
</ tr >
</ form >
< tr >
<!-- tableHead -->
</ tr >
< tbody class ="tableBody" >
< tr >
<!-- column -->
</ tr >
</ tbody >
</ table >
</ div >
extremeTable支持样式快速切换.可自定的样式包括column 的td以及table的一些属性，例如cellpadding等，
另本人发现，在properties中如下设置tableHeader的样式是不行的．不知道是否一个ＢＵＧ
table.headerClass=itoTableHeader
table.headerSortClass=itoTableHeaderSort
只能继承一个HeaderCell
{
public final static String TABLE_HEADER = " itoTableHeader " ;
public final static String TABLE_HEADER_SORT = " itoTableHeaderSort " ;
｝
新的样式代码：
<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="编号" width="100" styleClass="GridTd"/>
<ec:column property="name" title="名称" width="200" styleClass="GridTd"/>
<ec:column property="status" title="状态" width="80" styleClass="GridTd"/>
<ec:column property="born" title="生产日期" width="100" cell="date" format="yyyy-MM-dd" styleClass="GridTd"/>
</ec:table>
效果见下:
[4] 实现 table width 自动累加
原来的extremeTable 宽度要自己set。不会自动能过下面的column累加。
本人作了个修改以达到自动累加，省得自己加写上去：
查看htmlView.java 两处地方
toolbarPlacement
tableStart可见两处地方要修改的
[5] custom cell
在properties文件中我们可观察到:
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 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 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();
}
}
</ec:table
</ec:table
</ec:table