`

用eXtremeComponents做分页-简单方便

 
阅读更多

eXtremeComponents是提供更高级数据显示的开源JSP标签，用于以表格的形式来显示数据，它的功能强大且使用简单，常用的功能包括排序、分页、导出Excel与pdf等。使用ExtremeComponents列表组件，你需要去http://sourceforge.net/projects/extremecomp/下载发布的压缩包文件。不过现在更推荐使用javaEye里的GT-Grid ( 原名叫EC Side )， 地址：http://ecside.group.iteye.com/ ，大家可以去那里学习与讨论。

 

EC Side也是一个开源的列表组件，他是源自于开源列表组件 eXtremeComponents，不过已经早已脱离了eXtremeComponents而独立发展（里面仍有部分代码是来自 eXtremeComponents）。青出于蓝而胜于蓝，EC Side比eXtremeComponents的功能更强大。一般我们建议先学习和使用一下eXtremeComponents，再去学习和使用EC Side.

 

以下是一个eXtremeComponents使用的示例，用来演示一下ExtremeComponents列表组件进行数据库数据分页显示的使用，更多跟深入的学习，您可以参考http://www.blogjava.net/lucky/articles/33380.html 或者http://blog.chinaunix.net/u/7893/showart_426623.html。

 

完成下面的示例，需要按照如下的步骤进行：
先把一些准备工作做好，在MyEclipse新建web工程，在下载的ExtremeComponents压缩包中找到

commons-beanutils 1.7
commons-collections 3.0
commons-lang 2.0   
commons-logging 1.0.4
standard 1.0.2
extremecomponents-1.0.1.jar

将以上jar包和extremecomponents.tld文件拷贝到WEB-INF/lib目录下，并且把images整个文件夹拷贝到WebRoot下，以上的所有的jar包和文件都在下载的压缩包里可以找到，至此准备工作就完成了 。

 

1、建立数据库数据：
create database page;

use page;

create table student
(
stu_id integer auto_increment,
stuName varchar(255) not null,
address varchar(255) not null,
stuPhone varchar(255)not null,
primary key(stu_id)
);

insert into student(stuName,address,stuPhone) values('杨老板,'长沙','13787825190');

insert into student(stuName,address,stuPhone) values('王老板,'大连','13782251560');

这里可以复制上面的insert语句多插入几行不同的数据.

 

2、写一个类StudDAO.java来操作数据库，从数据库中取出数据，该类的代码如下：

Java代码  收藏代码
  1. package org.hnylj.eXtreme;  
  2.   
  3. import java.sql.Connection;  
  4. import java.sql.DriverManager;  
  5. import java.sql.PreparedStatement;  
  6. import java.sql.ResultSet;  
  7. import java.sql.SQLException;  
  8. import java.sql.Statement;  
  9. import java.util.ArrayList;  
  10. import java.util.HashMap;  
  11. import java.util.List;  
  12. import java.util.Map;  
  13.   
  14. public class StudDAO {  
  15.     private Connection conn = null ;  
  16.     private Statement stmt = null ;  
  17.     private PreparedStatement pstmt = null ;  
  18.     private ResultSet rs = null ;  
  19.     private static final String DRIVER = "com.mysql.jdbc.Driver" ;  
  20.     private static final String URL = "jdbc:mysql://localhost:3306/page" ;  
  21.     private static final String USERNAME = "root" ;  
  22.     private static final String PASSWORD = "123" ;  
  23.       
  24.     private List<Map<String,String>> list = new ArrayList<Map<String,String>>() ;  
  25.     private Map<String,String> map = null ;  
  26.   
  27.     public StudDAO () {  
  28.     }  
  29.       
  30.     //数据库连接  
  31.     public synchronized Connection getConnection () {  
  32.         try {  
  33.             Class.forName (DRIVER) ;  
  34.             conn = DriverManager.getConnection (URL,USERNAME,PASSWORD) ;  
  35.         } catch (ClassNotFoundException e) {  
  36.             e.printStackTrace () ;  
  37.             return null ;  
  38.         } catch (SQLException e) {  
  39.             e.printStackTrace () ;  
  40.             return null ;  
  41.         }   
  42.         return conn ;  
  43.     }  
  44.     
  45.   public List<Map<String,String>> query () {  
  46.     try {  
  47.       if (this.getConnection()!=null) {  
  48.           pstmt = this.getConnection().prepareStatement("select * from student") ;  
  49.           rs = pstmt.executeQuery () ;  
  50.             
  51.           while (rs.next()) {  
  52.               map = new HashMap<String,String>() ;  
  53.               map.put("stuName", rs.getString("stuName")) ;  
  54.               map.put("address", rs.getString("address")) ;  
  55.               map.put("stuPhone", rs.getString("stuPhone")) ;  
  56.               list.add(map) ;  
  57.           }  
  58.       }  
  59.     } catch(SQLException e) {  
  60.         e.printStackTrace() ;  
  61.     }  
  62.     return list ;  
  63.   }  
  64. }  

3、编写一个jsp页面，用来显示数据，其代码如下：

Html代码  收藏代码
  1. <%@ page language="java" import="java.util.*,org.hnylj.eXtreme.*"  
  2.     pageEncoding="gb2312"%>  
  3. <%@ taglib uri="WEB-INF/extremecomponents.tld" prefix="ec"%>  
  4.   
  5. <html>  
  6.     <head>  
  7.         <title>用extremecomponents分页</title>  
  8.         <style type="text/css">  
  9. .eXtremeTable {  
  10.     margin: 0;  
  11.     padding: 0;  
  12. }  
  13.   
  14. .eXtremeTable select {  
  15.     font-family: Verdana;  
  16.     font-size: 9px;  
  17.     border: solid 1px #EEE;  
  18.     width: 75px;  
  19. }  
  20.   
  21. .eXtremeTable .tableRegion {  
  22.     border: 1px solid silver;  
  23.     padding: 2px;  
  24.     font-family: Verdana;  
  25.     font-size: 10px;  
  26.     margin-top: 7px;  
  27. }  
  28.   
  29. .eXtremeTable .filter {  
  30.     background-color: #efefef;  
  31. }  
  32.   
  33. .eXtremeTable .filter input {  
  34.     font-family: Verdana;  
  35.     font-size: 10px;  
  36.     width: 100%;  
  37. }  
  38.   
  39. .eXtremeTable .filter select {  
  40.     font-family: Verdana;  
  41.     font-size: 9px;  
  42.     border: solid 1px #EEE;  
  43.     width: 100%;  
  44. }  
  45.   
  46. .eXtremeTable .tableHeader {  
  47.     background-color: #308dbb;  
  48.     color: white;  
  49.     font-family: Verdana;  
  50.     font-size: 11px;  
  51.     font-weight: bold;  
  52.     text-align: left;  
  53.     padding-right: 3px;  
  54.     padding-left: 3px;  
  55.     padding-top: 4;  
  56.     padding-bottom: 4;  
  57.     margin: 0;  
  58.     border-right-style: solid;  
  59.     border-right-width: 1px;  
  60.     border-color: white;  
  61. }  
  62.   
  63. .eXtremeTable .tableHeaderSort {  
  64.     background-color: #3a95c2;  
  65.     color: white;  
  66.     font-family: Verdana;  
  67.     font-size: 11px;  
  68.     font-weight: bold;  
  69.     text-align: left;  
  70.     padding-right: 3px;  
  71.     padding-left: 3px;  
  72.     padding-top: 4;  
  73.     padding-bottom: 4;  
  74.     border-right-style: solid;  
  75.     border-right-width: 1px;  
  76.     border-color: white;  
  77. }  
  78.   
  79. .eXtremeTable .odd a,.even a {  
  80.     color: Black;  
  81.     font-size: 10px;  
  82. }  
  83.   
  84. .eXtremeTable .odd td,.eXtremeTable .even td {  
  85.     padding-top: 2px;  
  86.     padding-right: 3px;  
  87.     padding-bottom: 2px;  
  88.     padding-left: 3px;  
  89.     vertical-align: middle;  
  90.     font-family: Verdana;  
  91.     font-size: 10px;  
  92. }  
  93.   
  94. .eXtremeTable .odd {  
  95.     background-color: #FFFFFF;  
  96. }  
  97.   
  98. .eXtremeTable .even {  
  99.     background-color: #dfe4e8;  
  100. }  
  101.   
  102. .eXtremeTable .highlight td {  
  103.     color: black;  
  104.     font-size: 10px;  
  105.     padding-top: 2px;  
  106.     padding-right: 3px;  
  107.     padding-bottom: 2px;  
  108.     padding-left: 3px;  
  109.     vertical-align: middle;  
  110.     background-color: #fdecae;  
  111. }  
  112.   
  113. .eXtremeTable .highlight a,.highlight a {  
  114.     color: black;  
  115.     font-size: 10px;  
  116. }  
  117.   
  118. .eXtremeTable .toolbar {  
  119.     background-color: #F4F4F4;  
  120.     font-family: Verdana;  
  121.     font-size: 9px;  
  122.     margin-right: 1px;  
  123.     border-right: 1px solid silver;  
  124.     border-left: 1px solid silver;  
  125.     border-top: 1px solid silver;  
  126.     border-bottom: 1px solid silver;  
  127. }  
  128.   
  129. .eXtremeTable .toolbar td {  
  130.     color: #444444;  
  131.     padding: 0px 3px 0px 3px;  
  132.     text-align: center;  
  133. }  
  134.   
  135. .eXtremeTable .separator {  
  136.     width: 7px;  
  137. }  
  138.   
  139. .eXtremeTable .statusBar {  
  140.     background-color: #F4F4F4;  
  141.     font-family: Verdana;  
  142.     font-size: 10px;  
  143. }  
  144.   
  145. .eXtremeTable .filterButtons {  
  146.     background-color: #efefef;  
  147.     text-align: right;  
  148. }  
  149.   
  150. .eXtremeTable .title {  
  151.     color: #444444;  
  152.     font-weight: bold;  
  153.     font-family: Verdana;  
  154.     font-size: 15px;  
  155.     vertical-align: middle;  
  156. }  
  157.   
  158. .eXtremeTable .title span {  
  159.     margin-left: 7px;  
  160. }  
  161.   
  162. .eXtremeTable .formButtons {  
  163.     display: block;  
  164.     margin-top: 10px;  
  165.     margin-left: 5px;  
  166. }  
  167.   
  168. .eXtremeTable .formButton {  
  169.     cursor: pointer;  
  170.     font-family: Verdana;  
  171.     font-size: 10px;  
  172.     font-weight: bold;  
  173.     background-color: #308dbb;  
  174.     color: white;  
  175.     margin-top: 5px;  
  176.     border: outset 1px #333;  
  177.     vertical-align: middle;  
  178. }  
  179.   
  180. .eXtremeTable .tableTotal {  
  181.     background-color: #FFFFFF;  
  182.     border-top: solid 1px Silver;  
  183. }  
  184.   
  185. .eXtremeTable .tableTotalEmpty {  
  186.     background-color: #FFFFFF;  
  187. }  
  188. </style>  
  189.     </head>  
  190.     <body style="margin: 25px;">  
  191.         <%   
  192.         StudDAO studDAO = new StudDAO() ;  
  193.         List<Map<String,String>> list = studDAO.query() ;  
  194.         request.setAttribute("studList", list) ;  
  195.         %>  
  196.         <ec:table items="studList"  
  197.             action="${pageContext.request.contextPath}/result.jsp"  
  198.             imagePath="${pageContext.request.contextPath}/images/table/*.gif"  
  199.             title="学员信息表" width="60%" rowsDisplayed="5">  
  200.             <ec:row>  
  201.                 <ec:column property="stuName" />  
  202.                 <ec:column property="address" />  
  203.                 <ec:column property="stuPhone" />  
  204.             </ec:row>  
  205.         </ec:table>  
  206.     </body>  
  207. </html>  

4、部署整个web工程到Tomcat下，启动Tomcat，在浏览器中输入：

http://localhost:8080/eXtremeDemo/result.jsp

至此，就可以在页面中看到从数据库中查询出来的数据，而且自动进行了分页显示,有上一页，下一页，首页，末页，这样给我们剩去了很多进行分页显示的代码，在不做其他考虑的情况下，使用该组件大大提高了工作的效率。

(只是一个举例，代码写得有点乱，重在了解如何使用该组件)

分享到：
| DWR框架学习
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    eXtremeComponents-1.0.1-with-dependencies

    "with-dependencies"暗示这个压缩包已经包含了运行"eXtremeComponents"所需的所有外部库，这样开发者在使用时就不必单独寻找并添加这些依赖，减少了配置的复杂性。 接下来，我们关注"eXtremeComponents"这个名字。...

    eXtremeComponents-1.0.2-M1.zip_COMPONENT_extremecomponents_extre

    标题中的"eXtremeComponents-1.0.2-M1.zip_COMPONENT_extremecomponents_extre"提到了一个名为eXtremeComponents的组件库，它是一个特定版本（1.0.2-M1）的软件包，可能包含了用于开发的控件或组件。...

    eXtremeComponents-1.0.1-with-dependencies.zip

    内附使用说明，亲身试验可行。极力推荐！...eXtremeComponents是提供更高级数据显示的开源JSP标签，用于以表格的形式来显示数据，它的功能强大且使用简单，常用的功能包括排序、分页、导出Excel与pdf等。

    eXtremeComponents-1.0.1+中文API___分页工具

    **eXtremeComponents-1.0.1+中文API 分页工具详解** 在软件开发中，尤其是在处理大量数据时，分页功能是必不可少的。它使得用户可以更有效地浏览和管理信息，避免一次性加载过多内容导致的性能问题。本文将深入探讨...

    eXtremeComponents控件分页导出数据Demo.rar

    《eXtremeComponents控件分页导出数据Demo详解》 在软件开发过程中，高效的数据展示和管理是至关重要的。eXtremeComponents控件系列以其强大的功能和灵活的定制性，在.NET平台上赢得了广大开发者的一致好评。尤其是...

    利用eXtremeComponents标签来实现分页实例

    总之，eXtremeComponents的`xe:pager`标签为Java Web开发者提供了一个简单且强大的分页解决方案。通过合理配置和绑定数据源，我们可以快速实现一个功能完善的分页系统。在实际开发中，可以根据项目需求进行定制，以...

    eXtremeComponents-1.0.4.zip

    extremetable标签是eXtremeComponents的核心组件，它允许开发者通过简单的标签语法实现动态、可定制的表格。与displaytag类似，extremetable支持分页、排序、过滤等功能，但其灵活性更高，可以更轻松地进行扩展和...

    分页组件extremeComponents的使用

    在实际使用中，开发者只需要配置好相应的数据库连接和SQL查询语句，XC分页组件会自动处理数据的分页和加载。 分页组件的主要功能包括： 1. **参数设置**：用户可以通过设置每页显示的记录数、当前页数等参数，控制...

    eXtremeComponents ( 开源 分页工具)

    **eXtremeComponents开源分页工具详解** 在IT领域，高效的数据管理是任何应用程序的基础。当处理大量数据时，分页技术变得至关重要，因为它能够提高用户体验，避免一次性加载过多数据导致的性能问题。...

    eXtremeComponents-1.0.3

    【eXtremeComponents-1.0.3】是一个软件组件包，它的出现是为了提供一套高效、易用的开发工具，以帮助程序员在构建应用程序时提高生产力和代码质量。这个版本1.0.3是该组件集合的一个稳定版本，用户反馈良好，表明它...

    eXtremeComponents-1.0.1.jar

    eXtremeComponents组件,导出Excel或pdf文件的jar包

    eXtremeComponents

    - **使用**：接着，通过引用库中的类、方法或接口来在自己的代码中使用eXtremeComponents的功能。 - **测试**：最后，进行单元测试和集成测试，确保与eXtremeComponents的交互按预期工作。 "ec"标签可能在使用该...

    extremecomponents

    在Java环境中，我们通常会使用JavaServer Faces (JSF) 或 JavaFX 这样的技术来配合extremecomponents。JSF是一种用于构建MVC（模型-视图-控制器）架构的Java Web框架，而JavaFX则提供了丰富的图形用户界面组件，两者...

    eXtremeComponents 源代码

    总的来说，eXtremeComponents源代码和.jar包为Java开发者提供了一套强大的组件工具箱，通过学习和使用这些组件，开发者可以更高效地开发出功能丰富、用户体验优秀的Java应用程序。同时，开源的特性也鼓励了社区的...

    eXtremeComponents-1[1].0.4-with-dependencies.zip

    XC的设计理念是模块化和可扩展性，这意味着开发者可以根据需要选择使用哪些组件，同时也可以方便地添加自定义组件或扩展已有组件。这种设计极大地提高了代码的复用性和项目的灵活性。 在实际开发中，使用...

    eXtremeComponents-1.0.4+extremetable使用手册+需要的jar包

    eXtremeTable分页控件完整例子包括了数据的分页、数据的Excel格式导出、数据的pdf电子书格式导出、数据的文本文件格式导出等功能,里面的源代码写得非常详细,好好看一下.... 功能强大，易于扩展的extremetable就是个...

    eXtremeComponents jar+doc+example

    总的来说，"eXtremeComponents jar+doc+example" 提供了一套完整的解决方案，涵盖了开发、理解和使用`ECTable`所需的全部资源。无论你是初次接触这个组件还是寻求增强已有项目的数据展示功能，这个资源包都能为你...

    eXtremeComponents-source

    基于以上信息，我们可以推测"eXtremeComponents-source"可能是一个用某种编程语言（如Java或C#）编写的组件库，用于创建桌面或Web应用程序的用户界面。这些组件可能包括按钮、表格、菜单、对话框等，旨在提高开发...

Magicbox
Global site tag (gtag.js) - Google Analytics