也来介绍一下 extremeTable

也来介绍一下 extremeTable
1、何为 extremeTable,又一个开源taglib
      extremeTable,开源的jsp 自定义标签,以表格的形式显示数据,当前最新版本为  1.0.1-M1.
它是一个类似display tag,valueList 等开源产品.
homepage: http://extremecomponents.org/
download: http://sourceforge.net/projects/extremecomp/

开源产品作者:
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/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,测试浏览http://your_web_app/test.jsp,看到

    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 "   %>
    <!--  在本页要用到jstl -->
    <% @ 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 >



    效果如下:
    ec1.jpg


    [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中,以至返回看到的页面还是之前的状态.



    /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
    代码为

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

    /ec:table
    ec:table



    [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"   >
            
    <!--过滤条件的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")取得这个值.可以方便扩展.

    /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注册中文字体,再修改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/ec:table
    ec:table


     ec另一亮点就帮我们写好了form ,如上代码:
          <ec:form name="mainform" action="goods.do"> </ec:form> 设置form name以及action

    参考文档
    http://extremecomponents.org/extremesite/public/documentation.jsp
    /ec:table
    /P>

  • 你可能感兴趣的:(也来介绍一下 extremeTable)