GWT例子中的分页研究.

GWT demo中的分页研究.

 

Mail
类是主要的模块.

 

 private MailList
mailList; 是分页所需要的主要的类.

 

public class MailList extends Composite implements ClickHandler {

 

 

MailList下面有一个

private FlexTable
table = new FlexTable
();

是用来动态显示分页数据的类.

 

private HorizontalPanel
navBar
= new HorizontalPanel
();

navBar是用来显示 [上一页][下一页] 这样的信息的.

 

 public MailList() {
    // Setup the table.
    table.setCellSpacing(0);
    table.setCellPadding(0);
    table.setWidth("100%");

    // Hook up events.
    table.addClickHandler(this);
    newerButton.addClickHandler(this);
    olderButton.addClickHandler(this);

    // Create the 'navigation' bar at the upper-right.
    HorizontalPanel innerNavBar = new HorizontalPanel();
    navBar.setStyleName("mail-ListNavBar");
    innerNavBar.add(newerButton);
    innerNavBar.add(countLabel);
    innerNavBar.add(olderButton);

    navBar.setHorizontalAlignment(HorizontalPanel.ALIGN_RIGHT);
    navBar.add(innerNavBar);
    navBar.setWidth("100%");

    initWidget(table);
    setStyleName("mail-List");

    initTable();
    update();
  }

 在构造函数里面进行数据的初始化.

 

因为MailList实现了ClickHander.所以属性添加监听的时候可以添加this

 

table.addClickHandler(this);
    newerButton.addClickHandler(this);
    olderButton.addClickHandler(this);

 

其实在

 public void onClick(ClickEvent event) {
    Object sender = event.getSource();
    if (sender == olderButton) {

 方法里面进行判断.是那个按钮发出的相应然后在做处理.

可以从Event中得到发出响应的部件的类.

 

然后就可以进行事件处理了..

 

仿照这个自己写了一个类:

 

private Button firestButton = new Button("首页");
	private Button previousButton = new Button("上一页");
	private Button nextButton = new Button("下一页");
	private Button lastButton = new Button("末页");
	private Button jumpButton1 = new Button();
	private Button jumpButton2 = new Button();
	private Button jumpButton3 = new Button();
	private Button jumpButton4 = new Button();
	private Button jumpButton5 = new Button();
	private int startRow, endRow = 0;
	private int totalRows = 100;
	private int maxRows = 10;
	private HTML showPageInfo = new HTML("", true);
	/* 设置分页显示的信息. */
	private FlexTable dateTable = new FlexTable();
	/* 数据存放的table */
	private VerticalPanel mainPanel = new VerticalPanel();
	/* 主要窗体. */
	private HorizontalPanel jumpPanel = new HorizontalPanel();

	public UserPageList() {

		mainPanel.setWidth("100%");/* 设置显示100% */
		dateTable.setCellSpacing(0);
		dateTable.setCellPadding(0);
		dateTable.setWidth("100%");
		dateTable.setBorderWidth(1);/* 添加一个border=0 */

		/* 为按钮添加时间相应. */
		dateTable.addClickHandler(this);
		firestButton.addClickHandler(this);
		previousButton.addClickHandler(this);
		nextButton.addClickHandler(this);
		lastButton.addClickHandler(this);
		jumpButton1.addClickHandler(this);
		jumpButton2.addClickHandler(this);
		jumpButton4.addClickHandler(this);
		jumpButton5.addClickHandler(this);

		/* 设置按钮条. */
		HorizontalPanel navBar = new HorizontalPanel();
		HorizontalPanel innerNavBar = new HorizontalPanel();
		navBar.setStyleName("mail-ListNavBar");
		innerNavBar.add(showPageInfo);
		innerNavBar.add(firestButton);
		innerNavBar.add(previousButton);
		innerNavBar.add(jumpPanel);
		innerNavBar.add(nextButton);
		innerNavBar.add(lastButton);
		/* 添加按钮. */

		navBar.setHorizontalAlignment(HorizontalPanel.ALIGN_RIGHT);
		navBar.add(innerNavBar);
		navBar.setWidth("100%");

		mainPanel.add(dateTable);
		mainPanel.add(navBar);
		setWidget(mainPanel);
		setWidth("700px");
		setText("用户分页演示.");// 并不是setTitle设置标题.
		initTable();
	}

	public void onClick(ClickEvent event) {/* 分页事件添加. */
		Object obj = event.getSource();
		if (firestButton == obj) {/* 第一页. */
			startRow = 0;
			endRow = startRow + maxRows;
			initTable();
		} else if (previousButton == obj) {/* 前一页 */
			startRow -= maxRows;
			if (startRow < 0) {
				startRow = 0;
			}
			endRow = startRow + maxRows;
			initTable();
		} else if (nextButton == obj) {/* 下一页 */
			if (!(startRow + maxRows >= totalRows)) {
				startRow += maxRows;
				endRow = startRow + maxRows;
			}
			initTable();
		} else if (lastButton == obj) {/* 末页. */
			endRow = totalRows;
			startRow = totalRows - maxRows;
			if (startRow < 0) {
				startRow = 0;
			}
			initTable();
		} else if (jumpButton1 == obj) {
			jumpPage(-2);
		} else if (jumpButton2 == obj) {
			jumpPage(-1);
		} else if (jumpButton4 == obj) {
			jumpPage(1);
		} else if (jumpButton5 == obj) {
			jumpPage(2);
		}
	}

	private void initTable() {
		// Create the header row.
		if (startRow == 0 && endRow == 0) {
			endRow = maxRows;
		}
		/* 设置标题. */
		dateTable.setText(0, 0, "ID");
		dateTable.setText(0, 1, "用户名");
		dateTable.setText(0, 2, "邮编");
		dateTable.setText(0, 3, "其他");

		int j = 1;
		for (int i = startRow; i < endRow; ++i) {/* 随机填入数据.将数据放到dataTable里面. */
			dateTable.setText(j, 0, "aa" + i);
			dateTable.setText(j, 1, "aa" + Random.nextInt());
			dateTable.setText(j, 2, "bb" + Random.nextInt());
			dateTable.setText(j, 3, "cc");
			j++;
		}
		showPageInfo.setHTML("开始:\t" + startRow + "记录\t结束:\t" + endRow + "记录");/*
																				 * 更新显示信息.
																				 */
		int currentPage = (startRow / maxRows) + 1;
		int maxPage = (totalRows / maxRows) ;
		System.out.println("currentPage:\t"+currentPage+"\tmaxPage:\t"+maxPage);
		for (int i = 0; i < jumpPanel.getWidgetCount(); i++) {
			jumpPanel.remove(i);
		}
		if ((currentPage - 2) >= 1) {
			jumpButton1.setText("" + (currentPage - 2));
			jumpPanel.add(jumpButton1);
			System.out.print("\t");
			System.out.print(currentPage - 2);
		}
		if ((currentPage - 1) > 1) {
			jumpButton2.setText("" + (currentPage - 1));
			jumpPanel.add(jumpButton2);
			System.out.print("\t");
			System.out.print(currentPage - 1);
		}
		jumpButton3.setText("" + currentPage);
		jumpPanel.add(new Button("" + currentPage));
		System.out.print("\t");
		System.out.print(currentPage);
		if ((currentPage + 1) < maxPage) {
			jumpButton4.setText("" + (currentPage + 1));
			jumpPanel.add(jumpButton4);
			System.out.print("\t");
			System.out.print(currentPage + 1);
		}
		if ((currentPage + 2) <= maxPage) {
			jumpButton5.setText("" + (currentPage + 2));
			jumpPanel.add(jumpButton5);
			System.out.print("\t");
			System.out.print(currentPage + 2);
		}
		System.out.println();
	}

	private void jumpPage(int pageNo) {
		int currentPage = (startRow / maxRows) + 1;
		System.out.println("pageNo:\t" + pageNo + "currentPage:\t"
				+ currentPage);
		startRow = startRow + (maxRows * pageNo);
		endRow = startRow + maxRows;
		initTable();
	}

 

 


 如图显示.目前这个还有一个小的bug.

 

在分页点击的时候.后台显示的是正确的.但是页面的组件有的时候会多出来几个button.

 

好像是没有清除掉该删除的东西.

 

还得仔细研究下呢.

 

附件是代码.

 

在添加上数据库操作就是一个ajax的分页了.这样开发一个分页.一个ajax的效率还是挺快的.

 

基本上是没有去弄那个麻烦的javascript.

 

速度也还是挺快的.想要看看什么类下面的方法都是很方便的呢.

 

时间: 2024-09-22 01:45:38

GWT例子中的分页研究.的相关文章

详解数据库中的分页、内存和I/O延迟

几年前我写了一篇关于 AIX 调优的文章,现在 AIX 7 出现了,所以有必要重新审视需要在 AIX 系统上执行的基本调优措施.已经发布的许多技术级别 (TL) 和一些建议可能会改变.在本文中,我将提供与 AIX 5.3.6.1 和 7 中的可调项相关的 AIX 调优信息. 我主要关注 I/O.内存和网络.在默认情况下,AIX 6 和 7 在内存调优方面做得相当好,只需要做几个小调整.但是,AIX 5.3 在这个方面需要更多调优.图 1 给出不同的可调项及其默认设置.第四栏是对于这三个版本最新的

ASP中实现分页显示的七种方法_应用技巧

在微软的ASP编程体系中,ADO对象的建立,使得从网页访问数据库成为一件易事,特别是ADO的Recordset对象使得控制数据的输出显示更为方便.自由.而在Visual InterDev6.0(以下简称VI6.0)中,由于Script Object Model(以下简称SOM).Design-Time Control(以下简称DTC)以及Data Environment Object Model(以下简称DEOM)等对象模型的引入,使网页对数据库的访问设计显得更为方便. 因为主题方面的原因,关于

ASP中实现分页显示的七种方法

在微软的ASP编程体系中,ADO对象的建立,使得从网页访问数据库成为一件易事,特别是ADO的Recordset对象使得控制数据的输出显示更为方便.自由.而在Visual InterDev6.0(以下简称VI6.0)中,由于Script Object Model(以下简称SOM).Design-Time Control(以下简称DTC)以及Data Environment Object Model(以下简称DEOM)等对象模型的引入,使网页对数据库的访问设计显得更为方便. 因为主题方面的原因,关于

Python的Flask框架中实现分页功能的教程

  这篇文章主要介绍了Python的Flask框架中实现分页功能的教程,文中的示例基于一个博客来实现,需要的朋友可以参考下 Blog Posts的提交 让我们从简单的开始.首页上必须有一张用户提交新的post的表单. 首先我们定义一个单域表单对象(fileapp/forms.py): ? 1 2 class PostForm(Form): post = TextField('post', validators = [Required()]) 下面,我们把这个表单添加到template中(file

ASP.NET技巧:在存储过程中实现分页

asp.net|存储过程|分页|技巧     我不是一个很有经验的程序员,在做项目的过程中会遇到很多的问题,在数据库中使用分页就是我做项目中遇到的一个问题.我从网上查了很多资料,有很多种方法.但我觉的创建临时数据表是最简单的方法,在我做Membership扩展时发现原来微软也是这样用的,你可一随便打开一个Membership的存储过程看看.     说了再多也没用,只要看看代码就清楚了,呵呵.      1CREATE PROCEDURE dbo.CreateSimple 2( 3 @PageI

PHP中模板分页的处理

分页|模板 PHP普通开发中php代码和html代码夹杂的情况中处理分页是比较简单的,也可以构建成函数的形式.最近开发中使用 Pear::DB + Smarty 的结构,于是考虑如果对模板进行分页,因为不能直接操作页面,所以就考虑生成分页字符串的形式. 因为是三层结构,类库-->PHP调用-->模板的形式,所有的数据处理是在类库里的,那么分页控制就在PHP调用中进行的,模板就复杂解析调用的结果.先直接看我们PHP调用中的分页代码:   -----------------------------

如何在Word 2013文档中插入分页符

分页符主要用于在Word2013文档的任意位置强制分页,使分页符后边的内容转到新的一页.使用分页符分页不同于Word2013文档自动分页,分页符前后文档始终处于两个不同的页面中,不会随着字体.版式的改变合并为一页.用户可以通过三种方式在Word2013文档中插入分页符: 方式1:打开Word2013文档窗口,将插入点定位到需要分页的位置.切换到"页面布局"功能区.在"页面设置"分组中单击"分隔符"按钮,并在打开的"分隔符"下拉

Word文档中插入分页符并对分页方式怎么设置

  Word文档中插入分页符并对分页方式怎么设置           1.打开需要处理的文档,将插入点光标放置到需要分页的位置.在功能区的"页面布局"选项卡中单击"页面设置"组中的"插入分页符和分节符"按钮,在打开的下拉列表中选择"分页符"选项,如图1所示.此时,文档将从插入点光标处插入分页符,同时完成分页,如图2所示. 图1 选择"分页符"选项 图2 插入分页符 2.打开"开始"选项卡

Extjs4中的分页应用结合前后台

 本文为大家介绍下Extjs4中的分页如何使用且结合前后台,具体的示例如下,感兴趣的朋友可以参考下 前台部分:  代码如下: Ext.define('GS.system.role.store.RoleGridStore',{  extend:'Ext.data.Store',  model:'GS.system.role.model.RoleGridModel',  id:'roleStoreId',  pageSize:4,//分页大小  proxy:{  type:'ajax',  url: