`
胡笨笨
  • 浏览: 162402 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

如何使用ecside列表组件构建列表

阅读更多
转自http://www.blogjava.net/allen-zhe/archive/2009/03/09/246328.html,很好的一篇介绍ecside的文章。
 
说在前面的话:
ECSide组件,一个功能丰富,简单易用的列表组件,套用圈子里的一句话:它可能不是最好的,但也许是你最需要的。感兴趣的同志们可以访问ECSide的圈子,里面的资源及文档都很丰富,不在这里做过多的介绍了,圈子地址为http://ecside.group.javaeye.com/
 
实例讲解:
实现从一张公告表读取公告信息并以列表展示的功能。本文中的源代码可通过这个链接下载。
bulletin_powered_by_ecside_allen.zip

另附ECSide标签的使用说明,方便大家查阅。

ECSide标签使用说明

开发环境:
Dev Tool: Eclipse 3.3
Web Server: Tomcat 5.5.23
Framework: Spring 2.0.6 + Hibernate 3.3.0 + Struts 1.2.8 + ecside_2.0_RC1
Database: Oracle 9i
 
实现步骤:

0) 准备工作

使用ecside工具,你需要准备的有:

1、ecside.jar

2、 ecside.tld标签

3、ecside.js

4、ecside.css

5、ecside使用table图片

注:以上内容均可在圈子中下载到。

1)配置ecside
   需要在web.xml中配置ecside的过滤器,用于文件导出和语言编码,忘记配置的话,会出现“正在提交”的问题。
<!--  ecside export filter  --> 
     < filter > 
         < filter-name > ecsideExport </ filter-name > 
         < filter-class > org.ecside.filter.ECSideFilter </ filter-class > 
         < init-param > 
             < param-name > useEasyDataAccess </ param-name > 
             < param-value > true </ param-value > 
         </ init-param > 
         < init-param > 
             < param-name > useEncoding </ param-name > 
             < param-value > true </ param-value > 
         </ init-param > 
         < init-param >         
             < param-name > encoding </ param-name > 
             < param-value > UTF-8 </ param-value > 
         </ init-param > 
     </ filter > 
     < filter-mapping > 
         < filter-name > ecsideExport </ filter-name > 
         < url-pattern > /* </ url-pattern > 
     </ filter-mapping > 
 
还需配置一下tld,
 < taglib > 
          < taglib-uri > /WEB-INF/ecside.tld </ taglib-uri > 
         < taglib-location > /WEB-INF/taglib/ecside.tld </ taglib-location > 
 </ taglib > 
  
另外,还可以初始化ecside.properties文件,写这个文件的目的是:把公共的内容集中在一个文件中,方便使用。一旦我们使用ecside 组件,哪个这些配置信息就可以直接引用。形式可以如下:
###########        table       ###############
table.method=post
table.width=95%
table.pageSizeList=10,20,50,100,1000,2000,all
table.rowsDisplayed=10
table.sortable=true
###########        column      ###############
column.format.date=yyyy/MM/dd
column.format.number=0.##
column.format.currency=###,###,###
 
2) 在Struts Action中使用ecside
首先来简单介绍一下RSF(列表、排序、过滤)操作方式:
ecside支持两种RSF方式:   基于java collection层 和 基于数据库层,下面分别介绍:

基于java collection层
这是ec的默认实现方式, 最简单易用.你要做的就是将整个列表所要展现的全部数据放入collection 内,并交给EC来处理.其中RSF操作,全部由EC在内存中完成,由于你已经将全部数据放入了collection中,所以排序 过滤都是基于全部数据的.你要在DAO中做的就是一个 查询操作,SQL语句中不需要加入 关于排序 分页 过滤的代码.
这种方式的优点非常明显:实现简单.缺点同样明显,而且在很大程度上是致命的: 数据量大的时候速度慢,而且很可能OutOfMemory.
 
基于数据库层
在这种方式下,EC的角色发生了一点点变化。此时,EC负责把 collection 里的内容展现出来, 同时会向你提供RSF相关的参数。而这些参数需要你自己手动取得 并传入到DAO中(当然EC提供了很多方便的方法来帮助你取得这些参数),具体功能的实现需要你自己在DAO中组织相应的SQL语句。
这种方式的优缺点正好和方式一相反。
 
我这里采用第二种基于数据库层的分页方式实现列表,这时在JSP中使用ecside时,要将<ec:table>中的几个重要属性设定为limit。如: <ec:table filterRowsCallback="process/limit"  sortRowsCallback="process/limit"  retrieveRowsCallback="process/limit" ...> 这里filterRowsCallback表示过滤的Callback方式,sortRowsCallback表示排序的Callback方式,retrieveRowsCallback表示分页的Callback方式,这三个属性都需要设定为limit。(不熟悉的读者可以查询原版EC中的相关说明,不在这里详述。)
Struts Action的代码为:
 
 /**/ /*  
     * 用ECSide構建列表
      *
      */ 
     public  ActionForward list(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)   {
        String v_type  =  request.getParameter( " type " );
         // 0) 設定過濾條件 
         Map < String, Object >  filterMap  =   new  HashMap < String, Object > ();
 //         filterMap.put("content", "test"); 
         Map < String, Object >  sortMap  =   new  HashMap < String, Object > ();
        sortMap.put( " createTime " ,  " desc " );  //  按照創建時間倒序排列
         // 1) 設定ECSide分頁對象 
         Limit limit  =  RequestUtils.getLimit(request);
         //  取总记录数 
          int  pageNo  =  RequestUtils.getPageNo(request);
         int  pagesize  =  RequestUtils.getCurrentRowsDisplayed(request);
         if  (pagesize  ==   0 )
            pagesize  =  PAGESIZE;
         //  设置总记录数及每页记录数 
          int  totalRows  =  RequestUtils.getTotalRowsFromRequest(request);
         if  (totalRows  <=   0 )   {
            totalRows  =  getEntityManager()
                    .getCount(getEntityClass(), filterMap);
        } 
        limit.setRowAttributes(totalRows, pagesize);
         //  根據參數得到結果 
         List < Bulletin >  result  =  getEntityManager().queryForListByCriter(
                getEntityClass(), filterMap, sortMap,
                ((pageNo  -   1 )  *  pagesize), pagesize);
        request.setAttribute(getEntityListName(), result);
        request.setAttribute( " myPageSize " , getPageSize(request));
        request.setAttribute( " type " , v_type);
         return  mapping.findForward(LIST);
    } 
  
这里我构建了过滤条件及排序条件查询数据,通过queryForListByCriter方法,输入当前起始页及每页的显示条数在数据层得到所需数据。详见代码中的注释。另附数据处理层两个方法的代码:
 
/**//*分页查询数据*/
public List queryForListByCriter(Class entityClass, Map filter,
            Map sortMap, int start, int everypage) {
        Criteria criteria = getCriteria(entityClass);
        setFilter(criteria, filter);
        setSort(criteria, sortMap);
        criteria.setFirstResult(start);
        criteria.setMaxResults(everypage);
        return criteria.list();
    }

/**//*计算数据条数*/    
public int getCount(Class entityClass, Map filter) {
        Criteria criteria = getCriteria(entityClass);
        setFilter(criteria, filter);
        criteria.setProjection(Projections.rowCount());
        return ((Integer) criteria.uniqueResult()).intValue();
    }
  
注:ecside与ORM工具无关,不管你使用什么方法只要能获得一个集合就好,这里我用的是Hibernate获得的集合。
 
3)在JSP中使用ecside
需要注意的是:
1. items的值一定要和request.setAttribute(getEntityListName(), result); 属性一致
2. 可以引用属性名做为值显示,如:${bulletin.id}
3. <ec:column property="name" title="公告名称">property属性值一定是映射文件中的某个属性 
  <%  @ page contentType = " text/html; charset=UTF-8 "   %> 
  <%  @ taglib uri = " /WEB-INF/ecside.tld "  prefix = " ec "   %> 
  <%  @ taglib uri = " http://java.sun.com/jsp/jstl/core "  prefix = " c "   %> 
  <%  @ taglib uri = " http://java.sun.com/jsp/jstl/fmt "  prefix = " fmt "   %> 
  <%  @ taglib uri = " http://java.sun.com/jsp/jstl/functions "  prefix = " fn "   %> 
 < c:set  var ="ctx"  value ="${pageContext.request.contextPath}" /> 
 
 < html > 
 < head > 
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   /> 
      < META  HTTP-EQUIV ="pragma"  CONTENT ="no-cache" > 
     < META  HTTP-EQUIV ="Cache-Control"  CONTENT ="no-cache, must-revalidate" > 
     < META  HTTP-EQUIV ="expires"  CONTENT ="0" > 
     < title > 公告列表 </ title > 
     < link  rel ="stylesheet"  type ="text/css"  href ="${ctx}/module/bizAcceptance/resources/ecside/css/ecside_style.css"   /> 
     < script  type ="text/javascript"  src ="${ctx}/module/bizAcceptance/resources/ecside/js/prototype_mini.js"   ></ script >     
     < script  type ="text/javascript"  src ="${ctx}/module/bizAcceptance/resources/ecside/js/ecside.js"   ></ script > 
     < script  type ="text/javascript"  src ="${ctx}/module/bizAcceptance/resources/ecside/js/ecside_msg_utf8_cn.js"   ></ script > 
 </ head > 
 < body > 
 < table  width ="100%"   border ="0"  cellspacing ="0"  cellpadding ="0" > 
 <!--  校验信息  --> 
   < tr > 
      < td  class ="left" > <%  @ include file = " /module/commons/htmlmessages.jsp "   %> </ td >                 
   </ tr > 
   < tr > 
         < td  height ="30" > 
             < span  style ="align:left;font-size:9pt;" > 
                请选择公告  < input  type ="button"  name ="Submit3"  value ='进  入' onclick ="doView()" > 
             </ span >< br > 
         </ td > 
   </ tr > 
   < tr > 
       < td > 
           < ec:table  items ="bulletins"  var ="bulletin" 
            retrieveRowsCallback ="limit" 
            filterRowsCallback ="limit"    
            action ="${ctx}/module/bulletin.do?method=list&type=${type}" 
            title ="我的公告列表"  
            useAjax ="false" 
            showPrint ="false" 
            width ="100%" 
            resizeColWidth ="true" 
            filterable ="false" 
            listWidth ="100%" 
            rowsDisplayed ="${myPageSize}" 
            pageSizeList ="${myPageSize},10,15,20,all" 
            xlsFileName ="公告列表.xls" 
            styleClass ="tableRegion"  
            style ="border:2px;table-layout:fixed;" 
            classic ="true" > 
             < ec:row > 
                 < ec:column  property ="_0"  title ="選擇"  width ="6%" > 
                     < input  type ="radio"  id ="radio_${GLOBALROWCOUNT}"  name ="checkedRadio"  value ="${bulletin.id}" > 
                 </ ec:column > 
                 < ec:column  property ="_1"  title ="序號"  width ="6%" > 
                    ${GLOBALROWCOUNT}
                 </ ec:column > 
                 < ec:column  property ="name"  title ="公告名称" > 
                     < a  href ="JavaScript:doStarting('${affair.id}')"  title ="點擊查看" >< c:out  value ="${bulletin.name}" /></ a > 
                 </ ec:column > 
                 < ec:column  property ="desn"  title ="描述"  ellipsis ="true"   /> 
                 < ec:column  property ="createBy"  title ="創建人"  width ="10%"   /> 
                 < ec:column  property ="createTime"  title ="創建時間"   width ="20%" > 
                     < fmt:formatDate  value ="${bulletin.createTime}"  pattern ="yyyy-MM-dd HH:mm:ss" /> &nbsp; 
                 </ ec:column > 
                 < ec:column  property ="_2"  title ="可執行操作" > 
                     < a  href ="${ctx}/module/bulletin.do?method=edit&ID=${bulletin.id}" >< img  src ="${ctx}/images/affairmgt/update.gif"  border ="0"  title ="編輯" > 編輯 </ a > &nbsp; 
                     < a  href ="${ctx}/module/bulletin.do?method=delete&ID=${bulletin.id}" >< img  src ="${ctx}/images/affairmgt/delete.gif"  border ="0"  title ="移除" > 移除 </ a > 
                 </ ec:column > 
             </ ec:row > 
         </ ec:table > 
       </ td > 
   </ tr >   
 </ table > 
  < script  language ="javascript" >  
     var  _confirm  =   " false " ;
     var  confirmMsg  =   " 查看此公告? " ;
     var  urlPrefix  =   " ${ctx}/module/bulletin.do?method=view&ID= " ;
     function  doView(itemId)   {
           if  (itemId  !=   null )   {
             if  (_confirm  ==  ' false '  ||  confirm(confirmMsg))   {
                ShowWaiting('正在加载数据,请稍候');
                  window.location  =  urlPrefix  +  itemId;
            } 
           }   else    {
               var  radio  =  document.getElementsByName('checkedRadio');
               for  (i  =   0 ; i  <  radio.length; i ++ )   {
                   if  (radio[i].checked)   {
                     if  (_confirm  ==  ' false '  ||  confirm(confirmMsg))   {
                        itemId  =  radio[i].value;
                          ShowWaiting('正在加载数据,请稍候');
                          window.location  =  urlPrefix  +  itemId;
                    } 
                     return ;
                  } 
              } 
              alert('请选则一個公告!');
          } 
   } 
 </ script > 
   </ body >  
 </ html > 
 
 
 
 
 

其中,<ec:column property="desn" title="描述" ellipsis="true" />,ellipsis属性实现单元格内数据过长的时候,自动截短并加"..."的功能,但是ie only!因为ff不支持 text-overflow: ellipsis; 使用ellipsis="true"的同时,还要为ec:table加上 style="table-layout:fixed;" (如果您已经使用了调整列宽功能 则不用添加)。

 
4) 启动服务,大功告成。
 
附件是生成的效果图。



需要提醒一下,这里采用的是ECSide的默认样式,可根据您具体的需求改变样式文件。

  • 大小: 195.7 KB
分享到:
评论

相关推荐

    分页组件ECSIDE文档

    - **高级列表功能**:利用ECSIDE组件,开发者能够轻松实现列表的分页、排序、查询和列宽调整等功能,尤其在大数据场景下,其性能优势更为显著。 - **多格式导出**:借助ECSIDE,可以将页面内容导出为PDF、XLS、CSV等...

    ecside源码

    - **模块化**:ecSide 使用模块化设计,每个功能或组件都封装在一个独立的模块中,模块间通过接口进行通信,降低了代码耦合度。 - **加载器**:ecSide 的加载器负责按需加载和管理模块,优化资源的加载顺序,提高...

    ecside 文 档

    Ecside是一款基于JSP标签的开源列表组件,它提供了一组JSP标签,能够帮助开发者快速构建功能强大的列表展示。Ecside的核心思想是简化数据集合(如Collection)到页面展示的过程,通过将数据放入request、pagecontext...

    Web项目所需ecside全部文件

    这个压缩包包含的"Web项目所需ecside全部文件"是ECSide的完整组件,使得用户能够在本地环境中顺利运行和使用ECSide。 首先,让我们详细了解一下ECSide的核心功能和特性: 1. **源码管理**:ECSide集成了SVN...

    Ecside使用总结

    Ecside是一款在JSP环境中广泛使用的组件,专为简化数据展示和处理而设计。它以其高效、易用和强大的功能,深受开发者的喜爱。本文将深入探讨Ecside的核心概念、主要功能以及如何在实际项目中有效利用它。 一、...

    ecside中文文档

    ECSide是一款用于Web开发的开源组件,主要用来处理表格数据的展示、排序和过滤等操作。它提供了两种不同的实现方式,以适应不同场景下的性能需求。 ### 1. 基于Java Collection层的方式 这是ECSide的默认实现,...

    ECSide标签

    在这个场景下,“标签”可能是指ECSide中的自定义标签库(Tag Library),这是Java Servlet JSP技术的一部分,允许开发者创建可重用的UI组件。 描述中的“NULL”意味着没有提供具体的详细信息,所以我们将基于...

    ecside+struts2+spring2.5+hibernate3.2

    本资料主要关注的是一个经典的Java Web开发技术栈,即ecSide、Struts2、Spring 2.5和Hibernate 3.2,以及与之配合使用的MySQL数据库。下面将详细阐述这些技术及其相互间的整合。 **ecSide** 是一个基于Spring的轻量...

    ecside完全版,copy即可应用

    使用ECSide时,开发者可以利用其提供的控制器(Controller)、模型(Model)和视图(View)组件,遵循MVC设计模式来组织代码。控制器负责接收和处理HTTP请求,模型处理业务逻辑和数据操作,而视图则负责生成用户界面...

    ecside速成到精通详细讲解

    它提供了丰富的内置组件和模板引擎,让开发者可以快速构建动态网页。 ### 2. 安装与配置 首先,你需要下载ecSide的最新版本并进行安装。安装过程中,要注意配置Java环境以及Tomcat服务器,确保它们与ecSide兼容。...

    Java_Side.zip_ecside

    3. **数据展现**:ECSide提供了一系列组件和工具,用于数据的高效展示。例如,它有强大的表格控件,支持排序、分页、过滤等多种功能。此外,还有下拉框、日期选择器等丰富的UI元素,帮助开发者快速构建功能丰富的Web...

    ecside_for_hibernate

    **压缩包子文件的文件名称列表:“Ec_demo”**:这个文件名可能代表了一个示例或演示项目,可能是为了展示如何在实际应用中使用ecside和Hibernate的组合。通常,这样的示例会包括配置文件、源代码、数据库脚本等,...

    最新最全的Ecside控件综合资料(使用文档+jar文件+例子)

    Ecside控件是一款在Java开发领域中用于构建Web应用程序的工具,它提供了丰富的用户界面组件,简化了前端页面与后台业务逻辑的交互。这个最新的综合资料包,包含了使用文档、jar文件以及源代码示例,为开发者提供了一...

    ecside demo

    `ecSide`通常使用JSP或FreeMarker模板引擎来创建视图。开发者可以在模板文件中插入表达式来动态渲染数据。 **配置与定制** `ecSide`允许开发者通过XML配置文件来定制应用的行为,如URL映射、数据源设置、拦截器等...

    ecside=grid

    标题“ecside=grid”可能指的是ECSide框架的一个特性,该框架是Java开发中用于构建数据网格(grid)的应用工具。ECSide是基于Java的开源项目,它提供了丰富的功能,帮助开发者快速构建Web应用中的数据展示和操作界面...

    ECSide所需jar及各种导出所需jar包.rar

    ECSide的开发者可能选择将这些jar包分发给用户,以确保他们拥有运行ECSide或使用其导出功能的所有必要组件。对于开发者而言,理解这些jar包的功能和作用是至关重要的,因为他们需要知道如何正确地将这些依赖引入到...

Global site tag (gtag.js) - Google Analytics