• 1. Ecside技术学习总结李俊伟 2009年2月1
  • 2. 目录 Ecside简介 怎样把Ecside引入项目 Ecside的基本用法 Ecside标签说明 常见问题解决 2
  • 3. Ecside简介 1.1 简介 ECSide是有一个基于jsp tag的开源列表组件. 简单的说,它就是一组可以帮助你快速实现强大的列表的jsp标签. 它的工作原理很简单. 您将要展现的列表的数据集合(Collection),放request/pagecontext/session内(使用setAttribute方法.这个工作可以在action/servlet里完成,也可以在jsp页面内完成),然后页面跳转到使用ECSide标签的jsp页面,此时ECSide就可以帮助您展现出所需要的列表. 3
  • 4. 怎样把Ecside引入项目 2.1 把ecside中的相应文件拷到项目相应目录下 WebRoot |-common | |- css:程序所需要的css样式 | |- images:所需的图片 | |- js:所需的JavaScript文件 | |- ajaxtmplate:所需的ajax程序 |- WEB-INF | |-ecside.tld:ec标签所需要的文件 | |- lib:ecside的jar包和关联的包 4
  • 5. 怎样把Ecside引入项目2.2 修改web.xml,设置项目字符集 ecsideExport org.ecside.filter.ECSideFilter useEncoding true encoding gbk 5
  • 6. 怎样把Ecside引入项目2.2 修改web.xml,设置项目字符集 ecsideExport /* 6
  • 7. 怎样把Ecside引入项目 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 7
  • 8. 怎样把Ecside引入项目 2.3 在项目lib目录下加入ecside所需jar包 dom4j-1.6.1.jar fop-0.20.5.jar h2.jar js.jar jstl.jar jxl.jar simhei.ttf simhei.xml simsun.ttc simsun.xml sitemesh-2.2.1.jar spring.jar standard.jar xalan-2.5.1.jar xercesImpl-2.6.1.jar xml-apis-2.0.2.jar 8
  • 9. Ecside的基本用法 3.1. ec在jsp页面中的基本写法 1.引入ec标签 <%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %> 2.在页面头部加入ec所需的css和js 9
  • 10. Ecside的基本用法 3.1. ec在jsp页面中的基本写法 3. ec标签写法 10
  • 11. Ecside的基本用法 3.2. ecside 分页 ecside分页包括数据库分页和内存分页 1. 数据库分页:每次在数据库中取出当页数据,主要步骤包括:取得结果集总个数,获取页面显示个数,获取当页记录,初始化结果集 写法举例: //指定一页默认显示的个数 private Integer DEFAULT_PAGE_SIZE = Integer.valueOf(20); // 服务器端分页 int totalRows = RequestUtil.getTotalRowsFromRequest(request);//默认是-1; String pageSizeStr = request.getParameter("tableId_crd");//页面显示个数 int pageSize = DEFAULT_PAGE_SIZE; try { pageSize = Integer.parseInt(pageSizeStr); } catch (Exception e) { } 11
  • 12. Ecside的基本用法 3.2. ecside 分页 1. 数据库分页<接上页>: if (totalRows < 0) { //获得总行数 totalRows = this.aduserDao.queryAdUserByDetailCount(areaCode,accountId); } //获得页面开始行数和结束行数 int[] rowStartEnd = RequestUtil.getRowStartEnd(request, totalRows,pageSize); //下面这个方法从0开始计算行数上面的方法指定从几开始 ORACLE数据库一般是从1开始 的,HSQLDB是从0开始. List adusers = this.aduserDao.queryAdUserByDetail(rowStartEnd[0] + 1, rowStartEnd[1], areaCode, accountId); //初始化结果集传向页面 RequestUtil.initLimit(request, "tableId", totalRows, pageSize); request.setAttribute("adusers", adusers);12
  • 13. Ecside的基本用法 3.2. ecside 分页 2. 内存分页又叫客户端分页,就是在数据库中查出所有记录,每次在内存中取出当页记录: 写法举例: //指定一页默认显示的个数 private Integer DEFAULT_PAGE_SIZE = Integer.valueOf(20); 客户端分页 List blackLists = this.blackListDao.queryBlackLists(cityCode); if (blackLists != null && blackLists.size() > 0) {//可写可不写 RequestUtil.initLimit(request, blackLists.size(), DEFAULT_PAGE_SIZE); } request.setAttribute("blackLists", blackLists); 13
  • 14. Ecside的基本用法 3.2. ecside 分页 3. 两种分页方式在页面的写法比较 客户端分页: tableId="adRing" items="adRingList" var="adRing" retrieveRowsCallback="process" action="${ctx }/adminoperate/replaceorder.do?method=queryUserADRings" 数据库分页: tableId="adRing“ items="adRingList" var="adRing" retrieveRowsCallback="limit" action="${ctx }/adminoperate/replaceorder.do?method=queryUserADRings" 14
  • 15. Ecside的基本用法 3.3. ecside 导出、打印 写法举例: 标签中添加 ◆ 属性: xlsFileName 设置导出xls的文件的文件名. 不指定时为不允许导出xls文件 ◆ 属性: pdfFileName 设置导出pdf的文件的文件名. 不指定时为不允许导出pdf文件 ◆ 属性: csvFileName 设置导出csv的文件的文件名. 不指定时为不允许导出csv文件 ◆ 属性: showPrint 是否显示打印按钮. true/false. 写法: --- 15
  • 16. Ecside的基本用法 3.4. ecside 自定义扩展 1.在工具栏添加自定义内容 2.在表格上增加自定义表格 起始时间:${startDate} 16
  • 17. Ecside的基本用法 3.5. ecside 单选框、复选框用法 单选框: var checkedvalues = ECSideUtil.getPageCheckValue('userId'); 值或空 复选框: var checkedvalues = ECSideUtil.getPageCheckValue(‘userId’); 数组或空17
  • 18. Ecside的基本用法 3.5. ecside 自带增删改操作 18
  • 19. Ecside的基本用法 3.5. ecside 自带增删改操作 常用模板写法: 19
  • 20. Ecside的基本用法 3.5. ecside 自带增删改操作 action中增加内容: // 向ajax发送处理信息request.setAttribute(ECSideConstants.C_UPDATE_RESULT_CODE,RequestUtil.failedInfo(request,"ec_table")); } // 向ajax发送处理信息 request.setAttribute(ECSideConstants.C_UPDATE_RESULT_CODE,RequestUtil.successfulInfo(request,"ec_table")); return new ActionForward("/common/ajaxtemplate/updateResult.jsp");20
  • 21. Ecside的基本用法 3.6. ecside 统计 1.支持表格的纵向统计。 2.支持表格的横向统计。 21
  • 22. Ecside标签说明 4.1. 标签属性说明(略,参看文档ecside标签说明.doc) 4.2. 标签属性说明(略,参看文档ecside标签说明.doc) 4.3.标签属性说明(略,参看文档ecside标签说明.doc) 22
  • 23. 常用问题解决 5.1.页面乱码问题 解决方法:1.检查web.xml中过滤器设置字符集 2.查看jsp页面contentType字符集 3.查看tomcat中server.xml中uriEncoding设置 4.检查ecsdie.js里面设置字符集 确保这四个地方字符集一样 5.2.导出pdf乱码问题 解决方法: 1.确认ecsdie.jar是不是支持当前字符集 2.lib下面增加字体文件 23
  • 24. 谢 谢!24