eXtremeComponents的eXtremeTable分页特性

article/2025/9/21 15:37:24
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

eXtremeComponents的eXtremeTable是一套很好的分页标签，比displayTag好多了。它使用jstl，所以与webwork，Struts,JSF 集成也很方便，推荐大家用


下面是我使用的例子：


 < ec:table  items ="users"  var ="user"  action =""  imagePath ="${ctx}/widgets/extremecomponents/images/table/zh_CN/*.gif"  cellpadding ="1"  title ="用户名"  
 locale ="zh_CN"  rowsDisplayed ="10" >  
      < ec:exportXls  fileName ="UserList.xls"  tooltip ="Export Excel" />
      < ec:exportPdf  fileName ="UserList.pdf"  tooltip ="输出PDF文件"  headerColor ="blue"  headerBackgroundColor ="blue"  headerTitle ="人员表" />  
    < ec:exportCsv  fileName ="UserList.txt"  tooltip ="输出CSV文件"  delimiter ="|" />  

    < ec:row >
     < ec:column  property ="rowcount"  cell ="rowCount"  sortable ="false"  title =" No."  width ="50" />
     < ec:column  property ="username"  title ="姓 名"  width ="200" />
     < ec:column  property ="firstName"   title ="firstName"  width ="200" />
     < ec:column  property ="lastName"   title ="lastName"  width ="200" />
    </ ec:row >
   </ ec:table >

Action

import  java.util.List;
 import  javax.servlet.http.HttpServletRequest;
 import  javax.servlet.http.HttpServletResponse;
 import  org.apache.struts.action.ActionForm;
 import  org.apache.struts.action.ActionForward;
 import  org.apache.struts.action.ActionMapping;
 import  com.ygsoft.propertyright.service.UserManager;
 import  com.ygsoft.propertyright.webapp.util.BeanUtil;

 public   class  TestAction  extends  BaseAction  {
    UserManager userManager = (UserManager)BeanUtil.getBean("userManager");
    
    public ActionForward testPage(ActionMapping mapping, ActionForm form, 
            HttpServletRequest request, HttpServletResponse response) throws Exception {
        List users = getUsers();
        request.setAttribute("users", users);
        return mapping.findForward("test");
    }

    public List getUsers() throws Exception {
                 return userManager.getUsers(null);    
                     }
}

              其中ecoAttrs是一个collection（List），放入pojo。action里面写你这个页面的访问方法（如我的页面是一个action，其他的如.do或者.jsp什么的都可以）。rowsDisplayed是默认显示条数，它可以自动实现分页。
下面的三个<ec:export>是导出三种格式用的，不用的话可以不写（写了需要在web.xml配置相应的filter）。
<ec:column>里面放属性，property指向pojo的相应属性，而title是表头显示的信息，这个标签需要用<ec:row>包起来（1.0.1 m4以后）

这里有一套中文图标：
http://tiny.51.net/extremecomponent/zh_CN.rar

web.xml配置

< filter >  
      < filter-name > eXtremeExport </ filter-name >  
     < filter-class >  org.extremecomponents.table.filter.ExportFilter  </ filter-class >  
 </ filter >  

 <!--  输出excel,pdf,csv的时候用  -->
< filter-mapping >  
 < filter-name > eXtremeExport </ filter-name >  
 < url-pattern > /* </ url-pattern >  
 </ filter-mapping >  


 <!--  其实这个配置可不要，已经在放在jar里面了loading的时候自动会加进来-  -->
< taglib >  
 < taglib-uri > /extremecomponents </ taglib-uri >  
 < taglib-location > /WEB-INF/tld/extremecomponents.tld </ taglib-location >
<!-- tld拷贝到相应目录去-> 
</taglib> 

中文问题

export里面的excel和pdf默认不支持中文，需要手工修改源码，excel的比较简单：
修改org.extremecomponents.table.view.XlsView.java（我指的是1.0.1-M4-A14的相应代码）
102行：
HSSFCell hssfCell = hssfRow.createCell(cellnum);
hssfCell.setEncoding(HSSFCell.ENCODING_UTF_16);（就是添加这一行）
122行：
HSSFCell cell = row.createCell(cellnum);
cell.setEncoding(HSSFCell.ENCODING_UTF_16);（就是添加这一行）
这个在使用UTF-8时工作正常。如果其他Unicode环境可以尝试HSSFCell.ENCODING_COMPRESSED_UNICODE。

编译后将对应.class放到WEB-INF/classes相应目录就可以了。

pdf view的比较麻烦，还没尝试，解决方法参照这个帖子：
http://extremecomponents.org/forum/viewtopic.php?t=139&highlight=chinese+filter
http://www-128.ibm.com/developerworks/cn/xml/x-ospdf/index.html

以使用Struts为例,说明一下如何使用eXtremeTable的分页特性

 

   这一切都可以在Action中完成,在Action会用到JSP中eXtremeTable的table标签的属性'tableId' 和'item','tableId'用于完成eXtremeTable的分页,'item'用于返回你分页的结果集,不多不少,刚好是你需要查看的那一页的结果集,比如说,你一页是10条记录,那你访问第20页的时候,'item'的结果集就只有第201条到第210条记录.还有就是在request中加入totalRows的属性,表示本次查询结果的数量

另外,JSP的中,eXtremeTable的table标签要retrieveRowsCallback属性,将该属性设为 org.extremecomponents.table.callback.LimitCallback,这是它默认的分页回调类,你也可以写自已的回调类.设置了该默认的回调类以后,你在Action里就需要向request加入totalRows属性,值为你的查询结果总记录数,这样才会产生翻页的效果.

现在就你的DisplayAction中加分页的特性了,如下:

Limit limit = LimitFactory.createInstanceOfLimit(request, TABLEID);
LimitFactory.setLimitPageAndRowAttr(limit,PAGE_SIZE,TOTAL_SIZE);

这里的TABLEID就是JSP页上标签的属性tableId, PAGE_SIZE是你一页的记录数,TOTAL_SIZE是你查询数据的总数

然后设置totalRow属性,它的值被要求为Integer类型的,转换一下:

request.setAttribute("totalRows",new Integer(TOTAL_SIZE));

将分页后的结果集(一页的内容)放到request的resultList(此为JSP中item属性设置的值)属性中去:

request.setAttribute("resultList", getTestData(limit.getCurrentRowsDisplayed(),limit.getPage()));

上面得到分页数据的函数原形为getTestData(int pageSize,int paget),通过指定一页的记录数和第几页来获得所需的数据,这可以根据数据库的分页特性,或者通过滑动游标的方式来得到,这里不再傲述.

以下为部分代码:

JSP部分:

< ec:table
  items ="resultList"  var ="item"  tableId ="youTableId"
        retrieveRowsCallback ="org.extremecomponents.table.callback.LimitCallback"
        filterRowsCallback ="org.extremecomponents.table.callback.LimitCallback"
        sortRowsCallback ="org.extremecomponents.table.callback.LimitCallback"
 action ="${pageContext.request.contextPath}/DisplayAction.do"
 imagePath ="${pageContext.request.contextPath}/images/table/*.gif"
 title ="TEST"
 width ="100%"
 rowsDisplayed ="10"
        sortable ="false"
        filterable ="false"
  >
         < ec:column  property ="name"  title ="姓名" />
         < ec:column  property ="nickName"  title ="别名" />
</ ec:table >

 

Action部分代码:

Limit limit  =  LimitFactory.createInstanceOfLimit(request, TABLEID);
LimitFactory.setLimitFilterAndSortAttr(limit);
LimitFactory.setLimitPageAndRowAttr(limit,PAGE_SIZE,TOTAL_SIZE);
request.setAttribute( " resultList " ,getTestData(limit.getCurrentRowsDisplayed(),limit.getPage()));
request.setAttribute( " totalRows " , new  Integer(TOTAL_SIZE));

,标签里的rowDisplayed属性要和Action中的PAGE_SIZE一致,不然会有问题...

其他资源
extremecomponents 用AJAX:
http://extremecomponents.org/wiki/index.php/AJAX_enabled_eXtremeTable_Tutorial
extremecomponents Group:
http://groups.google.com:80/group/eXtremeComponents_CN
资源
http://www.blogjava.net:80/lucky/category/7508.html
官方网站
http://www.extremecomponents.org


<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

http://chatgpt.dhexx.cn/article/mAdDofNq.shtml

相关文章

Android Dialog

Android Dialog

创建对话框 Showing a Dialog 显示对话框 Dismissing a Dialog 解除对话框 Using dismiss listeners 使用解除监听器Creating an AlertDialog 创建警告对话框 Adding buttons 增加按钮 Adding a list 增加列表 Adding checkboxes and radio buttons 增加单选框和复选框Creating…
阅读更多...
关于DialogResult

关于DialogResult

在程序中&#xff0c;经常会弹出一个对话框来让用户填写一些信息&#xff0c;填写完成后&#xff0c;当用户点击“确定”按钮后&#xff0c;在主窗体中进行其他的处理。比如一个简单的例子&#xff0c;在主窗体中有一个菜单&#xff0c;是“增加用户”&#xff0c;当点击这个菜…
阅读更多...
dialogFragment---dialog

dialogFragment---dialog

详解一&#xff1a; Android提供alert、prompt、pick-list&#xff0c;单选、多选&#xff0c;progress、time-picker和date-picker对话框&#xff0c;并提供自定义的dialog。在Android 3.0后&#xff0c;dialog基于fragment&#xff0c;并对之前版本提供兼容支持库&#xff0c…
阅读更多...
Android Dialog

Android Dialog

Android Dialog 创建对话框 一个对话框一般是一个出现在当前Activity之上的一个小窗口. 处于下面的Activity失去焦点, 对话框接受所有的用户交互. 对话框一般用于提示信息和与当前应用程序直接相关的小功能. Android API 支持下列类型的对话框对象: 警告对话框 AlertDialog: 一…
阅读更多...
Dialogs（对话框）

Dialogs（对话框）

对话框 对话框是一种提示用户去做出选择或输入其他信息的小窗口。 对话框不填充屏幕并且通常被用于在执行前需要用户做出决定的模态事件。 对话框设计 阅读 Dialogs 设计指南&#xff0c;获取包括语言规范等关于如何设计对话框的更多信息。 虽然 Dialog 类是对话框的基类&#…
阅读更多...
【Android Dialog】Dialog

【Android Dialog】Dialog

AlertDialog Dialog类是所有弹窗的父类&#xff0c;官方建议我们不要直接实例化它&#xff0c;而是使用其子类来获取实例。AlertDialog是系统提供的一个直接子类&#xff0c;它能帮助我们快速构建出不同类型的弹窗。接下来就看下各种类型弹窗的使用。 1、普通对话框 /*** Al…
阅读更多...
DIALOG

DIALOG

[SAP]屏幕Dynpro 原文链接&#xff1a;http://www.cnblogs.com/jiangzhengjun/p/4292250.html 对话屏幕Dynpro(SE51). 11 屏幕元素... 11 屏幕属性... 11 PAI事件的触发、屏幕元素Function Code设置... 12 屏幕流逻辑Screen Flow Logic. 12 对话屏幕中的字段命名大小写问题...…
阅读更多...
HTML基础之表单提交

HTML基础之表单提交

表单提交 在网页上&#xff0c;一般都会有让你输入信息进行校验或者检索的地方&#xff0c;比如搜索栏或者输入账号密码进行登录的地方&#xff0c;当我们输入数据之后&#xff0c;单击确定或者搜索等按键的时候&#xff0c;网页就会把我们输入到输入框中的信息发送到与前端网…
阅读更多...
JavaScript之Ajax-axios表单提交

JavaScript之Ajax-axios表单提交

目录 一.表单概念 二.表单提交 三.FormData语法 四.头像上传模板 五.请求体类型 六.图书管理(增删改查) 七.axios语法优化写法 优化1: axios全局配置 优化2: 默认的method 优化3: axios的快捷方法 一.表单概念 form标签&#xff08;表单&#xff09;是用来收集用户…
阅读更多...
表单提交后跳转指定链接

表单提交后跳转指定链接

表单的作用可以根据场景的变化而变化&#xff0c;可以是问卷调查、故障报修、自助下单等多种业务场景。如需提交后进行下一步操作&#xff0c;如成功提交咨询申请后自动跳转到咨询详情页&#xff0c;可以通过设置提交扩展&#xff0c;实现表单提交后跳转指定链接。 当跳转开启…
阅读更多...
jquery form表单提交

jquery form表单提交

使用jquery 进行form表单提交 文章目录 使用jquery 进行form表单提交先上结果&#xff1a;代码html代码 ---index.htmljs代码---index.js代码用到的jquery.js、select2的css和js在我项目里面有 下载地址 我这里使用了多选框&#xff08;传输到后端时&#xff0c;用对象接收&…
阅读更多...
表单提交和超链接请求传递参数的几种方式

表单提交和超链接请求传递参数的几种方式

表单提交和超链接请求传递参数的几种方式 这段时间在使用easy-ui的datagrid&#xff0c;他有自己提交表单的方式&#xff0c;所以就整理整理页面对参数的提交方式&#xff1a; 注&#xff1a;下面代码都已经过测试。 1. HTML提交表单 HTML提交表单简单易操作&#xff0c;依靠…
阅读更多...
模拟html post表单提交

模拟html post表单提交

一、打开自动提交访问 设置好表单账号密码&#xff0c;然后访问指定地址。就能自动提交登录并跳转到首页 1、填写访问表单信息 设置好表单账号密码 <input name"account" <input id"password" name"password" 然后填上访问地址action …
阅读更多...
02 Ajax表单提交

02 Ajax表单提交

目录 一、表单概念 1.表单 2.提交的两种方式 二、form-serize与FormData 1.form-serize 2.FormData 三、文件上传案例分析 以下的既为本文的核心概括 一、表单概念 1.表单 form标签&#xff08;表单&#xff09;是用来收集用户输入的信息。 表单构成&#xff1a; 表单标签&a…
阅读更多...
Form表单提交

Form表单提交

Form表单提交 form表单提交&#xff0c;表单提交分两种&#xff1a;自动提交 和 手动提交&#xff0c; form表单提交又分&#xff1a;post提交和get提交&#xff0c;以下用的都是post提交 一.自动提交表单&#xff1a; 自动提交表单&#xff0c;我们可以通过框架引用&#…
阅读更多...
html 提交form表单提交数据格式,form表单提交数据

html 提交form表单提交数据格式,form表单提交数据

form表单提交的几种方法 HTML表单提交的几种方式方式一：通过submit按钮提交方式二：通过一般按钮button提交1/3javascript">functionsubmit1(){varform1=document.getElementById("form1");form1.action="bjpowernode.html";form1.submit();方式三…
阅读更多...
JavaScript表单提交

JavaScript表单提交

表单提交在前端编程阶段中也是一个重点。它是由页面数据保存到后台数据库的重要枢纽&#xff0c;通过表单提交的方式将数据上传到数据库进行保存。同时这些数据也包含用户信息、统计信息、日志信息等等。 数据的信息不同&#xff0c;上传的方式也不同。在JavaScript中有四种种表…
阅读更多...
表单提交的四种方式

表单提交的四种方式

表单提交的四种方式开发工具与关键技术&#xff1a;VS &#xff0c;JavaScript &#xff0c;Ajax 作者&#xff1a;刘任锋 撰写时间&#xff1a;2021年5月7日内容&#xff1a;将from表单里的内容提交到控制器上。 HTML布局 JS&#xff1a;先获取姓名&#xff0c;性别&#xff0…
阅读更多...
表单的提交方式

表单的提交方式

表单有两个较特殊的属性&#xff0c;一个是method&#xff0c;是规定用于发送表单的HTTP方法&#xff08;提交表单的方式&#xff09;&#xff1b;还有一个是action&#xff0c;是规定当提交时向何处发送表单的数据&#xff08;要提交表单的地址&#xff09;。Form表单有一个自…
阅读更多...
InputStream的read()读取机制

InputStream的read()读取机制

public void readArr() {// 明确文件File file new File("D:/net.txt");// 构建流的对象InputStream inputStream null;try {inputStream new FileInputStream(file);// 声名缓冲数组int i;byte[] bytes new byte[5];while ((i inputStream.read(bytes)) ! -1) …
阅读更多...
推荐文章

Copyright @ 2022~2023