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.
速度也还是挺快的.想要看看什么类下面的方法都是很方便的呢.
