首页 > 其他分享 >也来介绍一下 extremeTable

也来介绍一下 extremeTable

时间：2023-06-15 18:01:40浏览次数：38  
标签：一下 介绍 cell html extremecomponents org extremeTable table public


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、导出ＥＸＣＥＬ以及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

２、安装与测试

下载解压到的主要文件包括

[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!

恭喜你，这表示安装成功！

３、动手学习这个taglib

建index.jsp页面,修改代码如下

<%@ page cnotallow="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
 collectinotallow="goodss"
    actinotallow="${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>


效果如下:

也来介绍一下 extremeTable_css

[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} \条\纪\录\符\合\条\件, \现\在\是\第 {1} \至 {2} \条\纪\录

table.statusbar.noResultsFound=\没\有\要\查\询\的\纪\录\。

table.toolbar.showAll=\所 \有

补充:中文 - > Unicode编码　可通过反编译class文件或用native2ascii命令得到 。

然后在table标签中增加locale属性即可切换

<ec:table
    ………………
    ………………
    ………………
    locale="en_US"
>
<ec:table
    ………………
    ………………
    ………………
    locale="zh_CN"
>
<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>

[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"  actinotallow="/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"  actinotallow="/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 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>

效果见下:

也来介绍一下 extremeTable_html_02

[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版本时还要我修改Ｎ个地方，现在为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 可以直接在<ec:column></e:column>中加html代码.

    并可用{collectionName.objectName}类似的语法取得当前object的成员变量值

C  ${ROWCOUNT}可取当前row num,是指以1开始计算 

D  ec另一亮点就帮我们写好了form ,如上代码:

   

<ec:form name="mainform" action="goods.do"> </ec:form> 设置form name以及action


标签：一下,介绍,cell,html,extremecomponents,org,extremeTable,table,public
From： https://blog.51cto.com/u_16065168/6493929

相关文章

  • 【网络知识】FTP主被动模式介绍及抓包分析
    一.FTP是什么FTP，即文件传输协议（FileTransferProtocol，FTP），基于该协议客户端与服务端可以实现共享文件、上传文件、下载文件。FTP基于TCP协议生成两个连接，一个用来控制连接，传输FTP命令，标准端口为21；另一个用于上传、下载数据，标准端口为20。FTP有两种工作模式，分别是主动模式和被动......
  • 今天的工作记录一下：关于centos关了防火墙却依然不能访问的问题
    今天的工作记录一下：关于centos关了防火墙却依然不能访问的问题问题在进行docker部署实验时，完成Zrlog部署之后需要进行测试，在Centos7.9内部的浏览器能访问，但是在外面的浏览器结果无法连接，尝试关闭防火墙，还是不行。猜测：猜测关闭防火墙并没有放行tomcat映射的端口，所以通过搜索引擎......
  • 南岸区装机容量最大的屋顶光伏项目落地与光伏云平台的介绍
    安科瑞虞佳豪6月15日，位于美的股份有限公司屋顶10千伏高压光伏工程正式并网投运。项目总装机容量峰值为13.413兆瓦，采用“自发自用，余电上网”的运行模式，是目前南岸区装机容量最大的屋顶光伏项目。​在现场，坐落在美的股份有限公司厂房上的光伏电站呈现出一派壮观的景象——一块块......
  • 2小时解不完的数据库练习题，来挑战一下吧！
    写在前面我已经记不起来，有多久没更新文章了。5月中旬我还在上班，中旬以后一系列发生的事情，真的远远超出了可承受范围，只能硬着头皮面对！我是谁，我应该是谁，又能怎样，只能向前·····数据库实例class表course表score表student表teacher表实际语句1、查询所有的课程的......
  • IKEA EDI项目开源介绍
    近期为了帮助广大用户更好地使用EDI系统，我们根据以往的项目实施经验，将成熟的EDI项目进行开源。用户安装好知行之桥EDI系统之后，只需要下载我们整理好的示例代码，并放置在知行之桥指定的工作区中，即可开始使用。今天的文章主要为大家介绍IKEAEDI项目，了解如何获取开源的项目代......
  • web3产品介绍：mask将Web3的隐私和优势引入像Facebook和Twitter这样的社交媒体平台
    介绍：MaskNetwork是一个开源的浏览器扩展，将Web3的隐私和优势引入像Facebook和Twitter这样的社交媒体平台。它是一个功能强大的工具，允许用户在社交媒体上享受区块链的隐私保护和其他Web3的好处。让我们一起探索MaskNetwork的主要特点和为用户带来的益处。主要特点：1.隐私保护：Ma......
  • 介绍vue3的钩子函数activated和deactivated使用场景
    activated和deactivated是Vue3中的两个生命周期钩子函数。activated钩子函数在组件被激活时调用，通常用于恢复组件的状态或执行一些初始化操作。例如，如果一个组件被从路由中激活，你可能需要在该组件被激活时从本地存储中加载一些数据。下面是一个示例代码：<template><div>......
  • vue-cli-介绍并安装vue-cli
    1.什么是vue-clivue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。2.安装和使用vue-cli是npm上的一个全局包，使用npminstall命令，即可方便的把它安装到自己的电脑上：npminstall-g@vue/cli......
  • [理论+实操] MONAI&PyTorch 如何进行分布式训练，详细介绍DP和DDP
    文章目录为什么要使用分布式训练分布式训练有哪些方法1️⃣数据并行2️⃣模型并行基于Pytorch的分布式训练方法DP(DataParallel)DDP(DistributedDataParallel)step1：初始化进程step2:在创建dataloder前加一个samplerstep3:设定Devicestep4:使用DistributedDataParallel模块......
  • 介绍一款 MRI&CT 图像预处理强大工具--FSL
    FSL是什么？全名是：FMRIB’sSoftwareLibraryFMRIB是英国牛津大学脑功能磁共振成像中心，FSL则是他们开发的一个软件库。由StephenSmith教授开发，发布于2000年适用于所有操作系统用于结构MRI、功能MRI（任务、静息）、扩散MRI的分析MRI,CT数据的预处理和分析MRI,CT数据的查看......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99