ECSide使用入门

1 简介

　　ECSide是有一个基于jsp tag的开源列表组件. 简单的说,它就是一组可以帮助你快速实现强大的列表的jsp标签. 它的工作原理很简单. 您将要展现的列表的数据集合(Collection),放request/pagecontext/session内(使用setAttribute方法.这个工作可以在action/servlet里完成,也可以在jsp页面内完成),然后页面跳转到使用ECSide标签的jsp页面,此时ECSide就可以帮助您展现出所需要的列表.

2 怎样把Ecside引入项目

2.1 把ecside中的相应文件拷到项目相应目录下

WebRoot
       |-common
                | |- css：程序所需要的css样式
                | |- images：所需的图片
                | |- js：所需的JavaScript文件
                | |- ajaxtmplate：所需的ajax程序
       |- WEB-INF
                | |-ecside.tld：ec标签所需要的文件
                | |- lib：ecside的jar包和关联的包

 

2.2 修改web.xml，设置项目字符集

<filter>
          <filter-name>ecsideExport</filter-name>
          <filter-class>org.ecside.filter.ECSideFilter</filter-class>
          <init-param>
                   <param-name>useEncoding</param-name>
                   <param-value>true</param-value>
          </init-param>
          <init-param>
                   <param-name>encoding</param-name>
                   <param-value>gbk</param-value>
          </init-param>
</filter>

<filter-mapping>
          <filter-name>ecsideExport</filter-name>
          <url-pattern>/*</url-pattern>
</filter-mapping>

2.3 在项目lib目录下加入ecside所需jar包

avalon-framework-4.0.jar                     
batik-1.5-fop-0.20-5.jar              
commons-beanutils-bean-collections.jar        
commons-beanutils-core.jar                
commons-beanutils.jar                     
commons-codec-1.3.jar                    
commons-collections-3.2.jar
commons-digester-1.8.jar      
commons-fileupload-1.2.jar   
commons-lang-2.3.jar   
commons-logging-1.1.jar    
commons-validator-1.3.1.jar

3 Ecside的基本用法

3.1.引入ec标签

<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>

3.2.在页面头部加入ec所需的css和js

<link rel="stylesheet" type="text/css" href="<%=webapp%>/common/css/ecside_style.css" />
<script language="JavaScript" src="<%=webapp%>/common/js/prototype_mini.js" ></script>
<script language="JavaScript" src="<%=webapp%>/common/js/ecside.js" ></script>

3.3. ec标签写法

<ec:table items="records" var="record"  useAjax=“false“  doPreload="false"
                   action=“/test.do?method=test“ title="用户列表“ classic=“true”>
         <ec:column property=“_0” title=“序号 value="${GLOBALROWCOUNT}" />
         <ec:column width="80" property="USERROLE" title="角色" />
         <ec:column width="120" property="USERNAME" title="用户名" />
         <ec:column width="100" property="PASSWD" title="密码"  />
</ec:table>

 4.小技巧

4.1. ec标签的统计功能

ec标签自带统计功能，比如下面：

<ec:column property="number" title="人数" />

上面一行代码只会在表格中增加一列，用来显示属性为number的值

现在我想对number的值进行统计，然后在最下面一行显示出来：

<ec:column property="number" title="总计" calc="total" calcTitle="Total:" />

4.2. ec标签的自动排序失效

在ec标签中如果绑定的数据不是直接从传输过来的集合里面的属性获取得到，而是要通过调用属性的方法得到，那么在生成的表格中对应列的自动排序就会失效。

解决方案：创建一个传输类，先将需要的数据取出来都赋值到新创建的类的属性上，然后将传输类传递到前台的ec标签