extremeTable 使用(2)

本文介绍 ExtremeTable 的国际化配置方法,包括资源文件的设置与切换,以及如何自定义样式和单元格组件来增强表格功能。还探讨了表格宽度自动调整、自定义单元格类型和扩展属性等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

[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

补充:中文 - > 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文件中配置,只能在页面中设

 <ec:table
    ……………………
    saveFilterSort
="true"
/ec:table>
<a href="1.jsp">跳到</a>

新建一页面用于跳转的页面 1.jsp
代码为

<a href="test.jsp?foo=true">Back</a>

 

 

<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" >
        
<!--过滤条件的input框-->
    
</tr>
</form>
    
<tr>
        
<!--tableHead-->
    
</tr>
    
<tbody class="tableBody" >
    
<tr>
        
<!--column-->
    
</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="<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="编号" 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>

效果见下:
ec[2].jpg

[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(
"&nbsp;");
        }


        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")取得这个值.可以方便扩展.

 

    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 可以直接在<ec:column></e:column>中加html代码.
    并可用{collectionName.objectName}类似的语法取得当前object的成员变量值
C  ${ROWCOUNT}可取当前row num,是指以1开始计算 
D

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值