分页组件extremeComponents的使用

最新推荐文章于 2012-10-19 22:01:43 发布

iteye_9863

最新推荐文章于 2012-10-19 22:01:43 发布

阅读量199

点赞数

分类专栏： Java综合文章标签： Java CSS JSP ITeye Web

Java综合专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍如何使用ExtremeComponents库构建动态表格。通过具体步骤指导如何配置环境、引入资源文件及编写JSP页面实现数据展示。展示了如何利用Java代码填充表格数据并设置样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.运行页面的效果如下：

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

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是点击下页，前页时要跳转的页面。

参考文档：[url]http://blogold.chinaunix.net/u/7893/showart_426623.html[/url]