wl_ldy 发表于 2013-2-6 08:40:59

分页组件extremeComponents的使用

1.从http://www.extremecomponents.org 下载相关的文件
包括相关的Jar包,css和tld文件

2.将extremecomponents-1.0.1.jar放到web-inf/lib下面

3.将下载的images文件夹放到WebRoot目录下面

4.将下载的extremecomponents.css放到WebRoot目录下面的css文件夹下

5.新建一个extremecomponents的测试页面ExtremeCompomentTest_1.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>    <base href="<%=basePath%>">      <title>My JSP 'ExtremeCompomentTest_1.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><link rel="stylesheet" type="text/css" href="<%=path%>/css/extremecomponents.css"></head>      <%    java.util.List presidents = new java.util.ArrayList();    java.util.Map president = new java.util.HashMap();president.put("name", "George Washington"); president.put("nickname", "Father of His Country");president.put("term", "1789-1797"); presidents.add(president); president = new java.util.HashMap();president.put("name", "John Adams");president.put("nickname", "Atlas of Independence"); president.put("term", "1797-1801");presidents.add(president);president = new java.util.HashMap();president.put("name", "Thomas Jefferson");president.put("nickname", "Man of the People, Sage of Monticello"); president.put("term", "1801-09"); presidents.add(president);president = new java.util.HashMap();president.put("name", "James Madison");   president.put("nickname", "Father of the Constitution");president.put("term", "1809-17");presidents.add(president);president = new java.util.HashMap();   president.put("name", "James Monroe");president.put("nickname", "The Last Cocked Hat, Era-of-Good-Feelings President");president.put("term", "1817-25");presidents.add(president);president = new java.util.HashMap();president.put("name", "John Adams");president.put("nickname", "Old Man Eloquent");president.put("term", "1825-29");presidents.add(president);request.setAttribute("pres", presidents); %>    <body>    This is my JSP page. <br>    <ec:table items="pres"               title="ExtremeCompomentTest"            action="${pageContext.request.contextPath}/ExtremeCompomentTest_1.jsp"            imagePath="${pageContext.request.contextPath}/images/table/*.gif"            rowsDisplayed="2"            >      <ec:row>            <ec:column property="name"></ec:column>            <ec:column property="nickname"></ec:column>            <ec:column property="term"></ec:column>      </ec:row>    </ec:table></body></html>
6.运行页面的效果如下:

http://dl.iteye.com/upload/attachment/479351/3cd0c545-e023-3c4a-9a39-cb0bc9e75b52.png

7.对测试的Jsp页面-ExtremeCompomentTest_1.jsp进行分析:
1)在页面中要添加<%@ taglib uri="http://www.extremecomponents.org" prefix="ec" %>
2)在页面中添加<link rel="stylesheet" type="text/css" href="<%=path%>/css/extremecomponents.css">的Css配置信息
3)创建一个HashMap,并且将presidents放在request中
       <%    java.util.List presidents = new java.util.ArrayList();    java.util.Map president = new java.util.HashMap();president.put("name", "George Washington"); president.put("nickname", "Father of His Country");president.put("term", "1789-1797"); presidents.add(president); president = new java.util.HashMap();president.put("name", "John Adams");president.put("nickname", "Atlas of Independence"); president.put("term", "1797-1801");presidents.add(president);president = new java.util.HashMap();president.put("name", "Thomas Jefferson");president.put("nickname", "Man of the People, Sage of Monticello"); president.put("term", "1801-09"); presidents.add(president);president = new java.util.HashMap();president.put("name", "James Madison");   president.put("nickname", "Father of the Constitution");president.put("term", "1809-17");presidents.add(president);president = new java.util.HashMap();   president.put("name", "James Monroe");president.put("nickname", "The Last Cocked Hat, Era-of-Good-Feelings President");president.put("term", "1817-25");presidents.add(president);president = new java.util.HashMap();president.put("name", "John Adams");president.put("nickname", "Old Man Eloquent");president.put("term", "1825-29");presidents.add(president);request.setAttribute("pres", presidents); %>   
4)对于body中的数据
       <ec:table items="pres"               title="ExtremeCompomentTest"            action="${pageContext.request.contextPath}/ExtremeCompomentTest_1.jsp"            imagePath="${pageContext.request.contextPath}/images/table/*.gif"            rowsDisplayed="2"            >      <ec:row>            <ec:column property="name"></ec:column>            <ec:column property="nickname"></ec:column>            <ec:column property="term"></ec:column>      </ec:row>    </ec:table>   
其中的items="pres"是数据源,title="ExtremeCompomentTest"是table的头信息,imagePath是图片的路径,rowsDisplayed是每页显示的记录数目,action是点击下页,前页时要跳转的页面。

参考文档:http://blogold.chinaunix.net/u/7893/showart_426623.html
页: [1]
查看完整版本: 分页组件extremeComponents的使用