eXtremeComponents是提供更高级数据显示的开源JSP标签，用于以表格的形式来显示数据，它的功能强大且使用简单，常用的功能包括排序、分页、导出Excel与pdf等。使用ExtremeComponents列表组件，你需要去http://sourceforge.net/projects/extremecomp/下载发布的压缩包文件。不过现在更推荐使用javaEye里的GT-Grid ( 原名叫EC Side )， 地址：http://ecside.group.iteye.com/ ，大家可以去那里学习与讨论。
?0?2
EC Side也是一个开源的列表组件，他是源自于开源列表组件 eXtremeComponents，不过已经早已脱离了eXtremeComponents而独立发展（里面仍有部分代码是来自eXtremeComponents）。青出于蓝而胜于蓝，EC Side比eXtremeComponents的功能更强大。一般我们建议先学习和使用一下eXtremeComponents，再去学习和使用EC Side.
?0?2
以下是一个eXtremeComponents使用的示例，用来演示一下ExtremeComponents列表组件进行数据库数据分页显示的使用，更多跟深入的学习，您可以参考http://www.blogjava.net/lucky/articles/33380.html?0?2或者http://blog.chinaunix.net/u/7893/showart_426623.html。
?0?2
完成下面的示例，需要按照如下的步骤进行：
先把一些准备工作做好，在MyEclipse新建web工程，在下载的ExtremeComponents压缩包中找到
commons-beanutils 1.7
commons-collections 3.0
commons-lang 2.0?0?2?0?2?0?2
commons-logging 1.0.4
standard 1.0.2
extremecomponents-1.0.1.jar
将以上jar包和extremecomponents.tld文件拷贝到WEB-INF/lib目录下，并且把images整个文件夹拷贝到WebRoot下，以上的所有的jar包和文件都在下载的压缩包里可以找到，至此准备工作就完成了 。
?0?2
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语句多插入几行不同的数据.
?0?2
2、写一个类StudDAO.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 ;
}
}3、编写一个jsp页面，用来显示数据，其代码如下：
<%@ 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>
4、部署整个web工程到Tomcat下，启动Tomcat，在浏览器中输入：
http://localhost:8080/eXtremeDem
eXtremeComponents-1.0.1-with-dependencies.zip
需积分: 10 95 浏览量
2012-04-18
16:52:39
上传
评论
收藏 8.92MB ZIP 举报
eXtremeComponents-1.0.1-with-dependencies.zip （2个子文件） 
用eXtremeComponents做分页 .txt 8KB
eXtremeComponents-1.0.1-with-dependencies.zip 8.92MB资源评论
