首页 > 其他分享 >用eXtremeComponents做分页-简单方便

用eXtremeComponents做分页-简单方便

时间：2023-06-15 11:03:19浏览次数：40  
标签：分页 color padding eXtremeComponents 方便 eXtremeTable font border size


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

上面有ExtremeComponents的中文参考文档。

 

完成下面的示例，我们按照如下的步骤进行：

先把一些准备工作做好，在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代码 

package org.hnylj.eXtreme;   
  
import java.sql.Connection;   
import java.sql.DriverManager;   
import java.sql.PreparedStatement;   
import java.sql.ResultSet;   
import java.sql.SQLException;   
import java.sql.Statement;   
import java.util.ArrayList;   
import java.util.HashMap;   
import java.util.List;   
import java.util.Map;   
  
public class StudDAO {   
    private Connection conn = null ;   
    private Statement stmt = null ;   
    private PreparedStatement pstmt = null ;   
    private ResultSet rs = null ;   
    private static final String DRIVER = "com.mysql.jdbc.Driver" ;   
    private static final String URL = "jdbc:mysql://localhost:3306/page" ;   
    private static final String USERNAME = "root" ;   
    private static final String PASSWORD = "123" ;   
       
    private List<Map<String,String>> list = new ArrayList<Map<String,String>>() ;   
    private Map<String,String> map = null ;   
  
    public StudDAO () {   
    }   
       
    //数据库连接   
    public synchronized Connection getConnection () {   
        try {   
            Class.forName (DRIVER) ;   
            conn = DriverManager.getConnection (URL,USERNAME,PASSWORD) ;   
        } catch (ClassNotFoundException e) {   
            e.printStackTrace () ;   
            return null ;   
        } catch (SQLException e) {   
            e.printStackTrace () ;   
            return null ;   
        }    
        return conn ;   
    }   
     
  public List<Map<String,String>> query () {   
    try {   
      if (this.getConnection()!=null) {   
          pstmt = this.getConnection().prepareStatement("select * from student") ;   
          rs = pstmt.executeQuery () ;   
             
          while (rs.next()) {   
              map = new HashMap<String,String>() ;   
              map.put("stuName", rs.getString("stuName")) ;   
              map.put("address", rs.getString("address")) ;   
              map.put("stuPhone", rs.getString("stuPhone")) ;   
              list.add(map) ;   
          }   
      }   
    } catch(SQLException e) {   
        e.printStackTrace() ;   
    }   
    return list ;   
  }   
}  
package org.hnylj.eXtreme;   
  
import java.sql.Connection;   
import java.sql.DriverManager;   
import java.sql.PreparedStatement;   
import java.sql.ResultSet;   
import java.sql.SQLException;   
import java.sql.Statement;   
import java.util.ArrayList;   
import java.util.HashMap;   
import java.util.List;   
import java.util.Map;   
  
public class StudDAO {   
    private Connection conn = null ;   
    private Statement stmt = null ;   
    private PreparedStatement pstmt = null ;   
    private ResultSet rs = null ;   
    private static final String DRIVER = "com.mysql.jdbc.Driver"
    private static final String URL = "jdbc:mysql://localhost:3306/page"
    private static final String USERNAME = "root"
    private static final String PASSWORD = "123"
       
    private List<Map<String,String>> list = new ArrayList<Map<String,String>>() ;   
    private Map<String,String> map = null ;   
  
    public StudDAO () {   
    }   
       
//数据库连接 
    public synchronized Connection getConnection () {   
        try {   
            Class.forName (DRIVER) ;   
            conn = DriverManager.getConnection (URL,USERNAME,PASSWORD) ;   
        } catch (ClassNotFoundException e) {   
            e.printStackTrace () ;   
            return null ;   
        } catch (SQLException e) {   
            e.printStackTrace () ;   
            return null ;   
        }    
        return conn ;   
    }   
     
  public List<Map<String,String>> query () {   
    try {   
      if (this.getConnection()!=null) {   
          pstmt = this.getConnection().prepareStatement("select * from student") ;   
          rs = pstmt.executeQuery () ;   
             
          while (rs.next()) {   
              map = new HashMap<String,String>() ;   
"stuName", rs.getString("stuName")) ;   
"address", rs.getString("address")) ;   
"stuPhone", rs.getString("stuPhone")) ;   
              list.add(map) ;   
          }   
      }   
    } catch(SQLException e) {   
        e.printStackTrace() ;   
    }   
    return list ;   
  }   
}

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

Html代码 

<%@ page language="java" import="java.util.*,org.hnylj.eXtreme.*"  
    pageEncoding="gb2312"%>  
<%@ taglib uri="WEB-INF/extremecomponents.tld" prefix="ec"%>  
  
<html>  
    <head>  
        <title>用extremecomponents分页</title>  
        <style type="text/css">  
.eXtremeTable {   
    margin: 0;   
    padding: 0;   
}   
  
.eXtremeTable select {   
    font-family: Verdana;   
    font-size: 9px;   
    border: solid 1px #EEE;   
    width: 75px;   
}   
  
.eXtremeTable .tableRegion {   
    border: 1px solid silver;   
    padding: 2px;   
    font-family: Verdana;   
    font-size: 10px;   
    margin-top: 7px;   
}   
  
.eXtremeTable .filter {   
    background-color: #efefef;   
}   
  
.eXtremeTable .filter input {   
    font-family: Verdana;   
    font-size: 10px;   
    width: 100%;   
}   
  
.eXtremeTable .filter select {   
    font-family: Verdana;   
    font-size: 9px;   
    border: solid 1px #EEE;   
    width: 100%;   
}   
  
.eXtremeTable .tableHeader {   
    background-color: #308dbb;   
    color: white;   
    font-family: Verdana;   
    font-size: 11px;   
    font-weight: bold;   
    text-align: left;   
    padding-right: 3px;   
    padding-left: 3px;   
    padding-top: 4;   
    padding-bottom: 4;   
    margin: 0;   
    border-right-style: solid;   
    border-right-width: 1px;   
    border-color: white;   
}   
  
.eXtremeTable .tableHeaderSort {   
    background-color: #3a95c2;   
    color: white;   
    font-family: Verdana;   
    font-size: 11px;   
    font-weight: bold;   
    text-align: left;   
    padding-right: 3px;   
    padding-left: 3px;   
    padding-top: 4;   
    padding-bottom: 4;   
    border-right-style: solid;   
    border-right-width: 1px;   
    border-color: white;   
}   
  
.eXtremeTable .odd a,.even a {   
    color: Black;   
    font-size: 10px;   
}   
  
.eXtremeTable .odd td,.eXtremeTable .even td {   
    padding-top: 2px;   
    padding-right: 3px;   
    padding-bottom: 2px;   
    padding-left: 3px;   
    vertical-align: middle;   
    font-family: Verdana;   
    font-size: 10px;   
}   
  
.eXtremeTable .odd {   
    background-color: #FFFFFF;   
}   
  
.eXtremeTable .even {   
    background-color: #dfe4e8;   
}   
  
.eXtremeTable .highlight td {   
    color: black;   
    font-size: 10px;   
    padding-top: 2px;   
    padding-right: 3px;   
    padding-bottom: 2px;   
    padding-left: 3px;   
    vertical-align: middle;   
    background-color: #fdecae;   
}   
  
.eXtremeTable .highlight a,.highlight a {   
    color: black;   
    font-size: 10px;   
}   
  
.eXtremeTable .toolbar {   
    background-color: #F4F4F4;   
    font-family: Verdana;   
    font-size: 9px;   
    margin-right: 1px;   
    border-right: 1px solid silver;   
    border-left: 1px solid silver;   
    border-top: 1px solid silver;   
    border-bottom: 1px solid silver;   
}   
  
.eXtremeTable .toolbar td {   
    color: #444444;   
    padding: 0px 3px 0px 3px;   
    text-align: center;   
}   
  
.eXtremeTable .separator {   
    width: 7px;   
}   
  
.eXtremeTable .statusBar {   
    background-color: #F4F4F4;   
    font-family: Verdana;   
    font-size: 10px;   
}   
  
.eXtremeTable .filterButtons {   
    background-color: #efefef;   
    text-align: right;   
}   
  
.eXtremeTable .title {   
    color: #444444;   
    font-weight: bold;   
    font-family: Verdana;   
    font-size: 15px;   
    vertical-align: middle;   
}   
  
.eXtremeTable .title span {   
    margin-left: 7px;   
}   
  
.eXtremeTable .formButtons {   
    display: block;   
    margin-top: 10px;   
    margin-left: 5px;   
}   
  
.eXtremeTable .formButton {   
    cursor: pointer;   
    font-family: Verdana;   
    font-size: 10px;   
    font-weight: bold;   
    background-color: #308dbb;   
    color: white;   
    margin-top: 5px;   
    border: outset 1px #333;   
    vertical-align: middle;   
}   
  
.eXtremeTable .tableTotal {   
    background-color: #FFFFFF;   
    border-top: solid 1px Silver;   
}   
  
.eXtremeTable .tableTotalEmpty {   
    background-color: #FFFFFF;   
}   
</style>  
    </head>  
    <body style="margin: 25px;">  
        <%    
        StudDAO studDAO = new StudDAO() ;   
        List<Map<String,String>> list = studDAO.query() ;   
        request.setAttribute("studList", list) ;   
        %>  
        <ec:table items="studList"  
            action="${pageContext.request.contextPath}/result.jsp"  
            imagePath="${pageContext.request.contextPath}/images/table/*.gif"  
            title="学员信息表" width="60%" rowsDisplayed="5">  
            <ec:row>  
                <ec:column property="stuName" />  
                <ec:column property="address" />  
                <ec:column property="stuPhone" />  
            </ec:row>  
        </ec:table>  
    </body>  
</html>  
<%@ page language="java" import="java.util.*,org.hnylj.eXtreme.*"
pageEncoding="gb2312"%>  
<%@ taglib uri="WEB-INF/extremecomponents.tld" prefix="ec"%>  
  
<html>  
    <head>  
        <title>用extremecomponents分页</title>  
        <style type="text/css">  
.eXtremeTable {   
    margin: 0;   
    padding: 0;   
}   
  
.eXtremeTable select {   
    font-family: Verdana;   
    font-size: 9px;   
    border: solid 1px #EEE;   
    width: 75px;   
}   
  
.eXtremeTable .tableRegion {   
    border: 1px solid silver;   
    padding: 2px;   
    font-family: Verdana;   
    font-size: 10px;   
    margin-top: 7px;   
}   
  
.eXtremeTable .filter {   
    background-color: #efefef;   
}   
  
.eXtremeTable .filter input {   
    font-family: Verdana;   
    font-size: 10px;   
    width: 100%;   
}   
  
.eXtremeTable .filter select {   
    font-family: Verdana;   
    font-size: 9px;   
    border: solid 1px #EEE;   
    width: 100%;   
}   
  
.eXtremeTable .tableHeader {   
    background-color: #308dbb;   
    color: white;   
    font-family: Verdana;   
    font-size: 11px;   
    font-weight: bold;   
    text-align: left;   
    padding-right: 3px;   
    padding-left: 3px;   
    padding-top: 4;   
    padding-bottom: 4;   
    margin: 0;   
    border-right-style: solid;   
    border-right-width: 1px;   
    border-color: white;   
}   
  
.eXtremeTable .tableHeaderSort {   
    background-color: #3a95c2;   
    color: white;   
    font-family: Verdana;   
    font-size: 11px;   
    font-weight: bold;   
    text-align: left;   
    padding-right: 3px;   
    padding-left: 3px;   
    padding-top: 4;   
    padding-bottom: 4;   
    border-right-style: solid;   
    border-right-width: 1px;   
    border-color: white;   
}   
  
.eXtremeTable .odd a,.even a {   
    color: Black;   
    font-size: 10px;   
}   
  
.eXtremeTable .odd td,.eXtremeTable .even td {   
    padding-top: 2px;   
    padding-right: 3px;   
    padding-bottom: 2px;   
    padding-left: 3px;   
    vertical-align: middle;   
    font-family: Verdana;   
    font-size: 10px;   
}   
  
.eXtremeTable .odd {   
    background-color: #FFFFFF;   
}   
  
.eXtremeTable .even {   
    background-color: #dfe4e8;   
}   
  
.eXtremeTable .highlight td {   
    color: black;   
    font-size: 10px;   
    padding-top: 2px;   
    padding-right: 3px;   
    padding-bottom: 2px;   
    padding-left: 3px;   
    vertical-align: middle;   
    background-color: #fdecae;   
}   
  
.eXtremeTable .highlight a,.highlight a {   
    color: black;   
    font-size: 10px;   
}   
  
.eXtremeTable .toolbar {   
    background-color: #F4F4F4;   
    font-family: Verdana;   
    font-size: 9px;   
    margin-right: 1px;   
    border-right: 1px solid silver;   
    border-left: 1px solid silver;   
    border-top: 1px solid silver;   
    border-bottom: 1px solid silver;   
}   
  
.eXtremeTable .toolbar td {   
    color: #444444;   
    padding: 0px 3px 0px 3px;   
    text-align: center;   
}   
  
.eXtremeTable .separator {   
    width: 7px;   
}   
  
.eXtremeTable .statusBar {   
    background-color: #F4F4F4;   
    font-family: Verdana;   
    font-size: 10px;   
}   
  
.eXtremeTable .filterButtons {   
    background-color: #efefef;   
    text-align: right;   
}   
  
.eXtremeTable .title {   
    color: #444444;   
    font-weight: bold;   
    font-family: Verdana;   
    font-size: 15px;   
    vertical-align: middle;   
}   
  
.eXtremeTable .title span {   
    margin-left: 7px;   
}   
  
.eXtremeTable .formButtons {   
    display: block;   
    margin-top: 10px;   
    margin-left: 5px;   
}   
  
.eXtremeTable .formButton {   
    cursor: pointer;   
    font-family: Verdana;   
    font-size: 10px;   
    font-weight: bold;   
    background-color: #308dbb;   
    color: white;   
    margin-top: 5px;   
    border: outset 1px #333;   
    vertical-align: middle;   
}   
  
.eXtremeTable .tableTotal {   
    background-color: #FFFFFF;   
    border-top: solid 1px Silver;   
}   
  
.eXtremeTable .tableTotalEmpty {   
    background-color: #FFFFFF;   
}   
</style>  
    </head>  
    <body style="margin: 25px;">  
        <%    
studDAO = new
        List<Map<String,String>> list = studDAO.query() ;   
        request.setAttribute("studList", list) ;   
        %>  
        <ec:table items="studList"
action="${pageContext.request.contextPath}/result.jsp"
imagePath="${pageContext.request.contextPath}/images/table/*.gif"
title="学员信息表" width="60%" rowsDisplayed="5">  
            <ec:row>  
                <ec:column property="stuName" />  
                <ec:column property="address" />  
                <ec:column property="stuPhone" />  
            </ec:row>  
        </ec:table>  
    </body>  
</html>

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

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

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

标签：分页,color,padding,eXtremeComponents,方便,eXtremeTable,font,border,size
From： https://blog.51cto.com/u_16065168/6485360

相关文章

  • 当 GraphQL 遇上图数据库，便有了更方便查询数据的方式
    人之初，性本鸽。大家好，我叫储惠龙（实名上网），你可以叫我小龙人，00后一枚。目前从事后端开发工作。今天给大家带来一个简单的为NebulaGraph提供GraphQL查询支持的DEMO，为什么是简单的，因为本来想完成更多工作再给大家介绍的，但是上个月太忙加上下个月更忙，但是我又很想白嫖一下Neb......
  • 分页
    物理分页每次去数据库中只查询一页的数据点击下一页，去数据库中只查询第一页的数据逻辑分页把博客中的所有数据都查询回来了，放到内存，每次从内存中取一页的数据过来SQLselect*frombloglimit1,21代表起始的位置，2代表访问的行数pom.xml<dependency><group......
  • 记录一个MySQL中order by 和 limit 连用导致分页查询不生效的坑
    具体现象和这位同学的一致，具体的解决办法也是参考这位同学的做法参考文章地址：https://www.cnblogs.com/yuluoxingkong/p/10681583.html......
  • 直播软件app开发，vue里tab菜单横向展示，可分页功能组件实现
    直播软件app开发，vue里tab菜单横向展示，可分页功能组件实现子组件： <template><div>  <el-buttonv-if="move!=0&&!dataLen"size='small'icon="el-icon-arrow-left"@click="navPrev"></el-button>   <ulref......
  • 分页存储管理与页表自映射
    分页式内存管理在分页式内存管理中，（用户态的）程序的地址空间就变成了虚拟地址空间，不能直接对物理页面进行操作。程序使用的地址会经过MMU处理，变成物理地址再进行访问。其中页表基址寄存器保存的是页表第一项的物理地址。页表自映射现在来看二级分页内存管理的情况。程序只能通......
  • java 获取ftp文件列表以及模糊查询，并对结果进行分页
    /***获取ftp文件列表*".*\\.txt"：匹配所有以".txt"结尾的文件名。其中，星号（*）表示任意字符序列，反斜杠（\）用于转义点号（.）字符。*".*"+"任意字符"+".*\\.txt"：匹配所有包含"表示匹配任意多个任意字符"和以".txt"结尾的文件名。其中，星号（*）表示任意字......
  • 京东购物车分页方案探索和落地
    随着京东购物车应用场景的丰富化和加车渠道的多元化，京东购物车的商品容量从2015年至今一直在逐步增加。2015年京东购物车由80件扩容到120件；2018年由120件扩容到150件；2020年由150件扩容到180件；2021年京东PLUS会员扩容到了220件。持续不断的扩容给我们的后端服务带来了巨大的......
  • Oracle 三种分页方法
    Oracle的三层分页指的是在进行分页查询时，使用三种不同的方式来实现分页效果，分别是使用ROWNUM、使用OFFSET和FETCH、使用ROW_NUMBER()OVER()1.使用ROWNUM ROWNUM是Oracle中一个伪列，它用于表示返回的行的序号。使用ROWNUM进行分页查询的方法是在SELECT语句中加入WHERE子句，并在W......
  • github PageHelper 分页工具类
    分页工具类importcn.hutool.core.lang.Assert;importcom.github.pagehelper.PageInfo;importcom.google.common.collect.Lists;importorg.springframework.util.CollectionUtils;importjava.util.Collections;importjava.util.Iterator;importjava.util.List;imp......
  • mybatis分页插件示例
    代码示例： 注意Service中的返回值必须要和mapper中的返回值类型的@OverridepublicPageInfo<UserDO>test(ReqQueryDTOreq){PageHelper.startPage(req.getPageNumber(),req.getPageSize());List<UserDO>userDOS=mapper.pageAllSpaces(req);......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99