本来想找个针对flex分页的组件,但是现实当中一直没有找到一个适合自己的方案。没有最好,只有最合适,针对我做的东西,我写了一个小组件,在生产力方面有了显著的提高。希望对某些同学有所帮助。
注意:此分页组件是建立在以后台提供特定格式的XML为基础的。
分页组件由三部分组成 1 分页需要的工具类 2 组件界面及相关功能代码 3 后台XML
首先介绍两个工具类:
PagingTool.as,封装了分页时最常用到的参数
package org.wjh.pager { import flash.net.URLVariables; public class PagingTool { //要读取的store private var store:DataStore = null; //每页显示多少个 public var pageSize:int = 20; //从第几个开始,需要传参过去 计算方法:current*pageSize public var beginNum:int = 0; public var totalCount:int = 0; //当前页是第几页 [Bindable] public var current:int = 0; //总共的页数 public var totalPage:int = 0; //需要传送的参数 public var params:URLVariables = new URLVariables(); //构造方法 需要构造的方法 public function PagingTool(ds:DataStore) { this.store = ds; //后台取一定要注意 需要利用request.getParameter("begin") //或者request.getParameter("size") //从第begin条记录开始 取出size条记录 params.begin = this.beginNum; params.size = this.pageSize; } } }
DataStore.as:封装读取xml时,需要传递的一些参数
package org.wjh.pager { public class DataStore { //提供数据的URL public var url:String = ""; //要读取的节点 XMLList public var node:String = ""; //表明总条数的节点 这里暂时没有用到 判断总条数 固定为total public var totalNode:String = ""; } }
接下来是,分页组件的界面和相关的事件响应代码块,本组件界面比较简单,包含下一页,上一页和一个combox跳转,各位可以根据实际需要做相应修改即可。
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.controls.List;
import mx.rpc.events.ResultEvent;
import flash.utils.getTimer;
import mx.rpc.http.mxml.HTTPService;
import mx.controls.DataGrid;
import org.wjh.pager.PagingTool;
import org.wjh.pager.DataStore;
import mx.events.ResizeEvent;
import mx.controls.Alert;
[Bindable]
public var store:DataStore = null;
[Bindable]
public var pagingTool:PagingTool = null;
[Bindable]
public var grid:DataGrid = null;
[Bindable]
private var combNum:int = 0;
[Bindable]
private var bindTotal:int = 0;
//页面的初始化
private function pageInit():void {
//在走这一步以前,用户已经把pagingTool和Store设置好了
var http:HTTPService = new HTTPService();
http.url = store.url + "?time=" + new Date().getTime();
http.showBusyCursor = true;
http.method = "POST";
http.resultFormat = "e4x";
var params:URLVariables = pagingTool.params;
params.begin = 0;
params.size = pagingTool.pageSize;
http.addEventListener(ResultEvent.RESULT,pageInitCallback);
http.addEventListener(FaultEvent.FAULT,faultHand);
http.send(params);
}
//如果用户需要重新设置参数 选择不一样的数据时 此方法起一定作用
public function invoke():void {
this.pageInit();
}
//页面的初始化
private function pageInitCallback(e:ResultEvent):void {
var xml:XML = XML(e.result);
/**var xmlList:XMLList = xml.elements(store.node);*/
var xmlList:XMLList = new XMLList(xml.elements(store.node));
//Alert.show((xml.elements(store.node)) as String);
//总数量节点必须要以total命名,暂时按照这个方式进行
pagingTool.totalCount = int(xml.total);
bindTotal = pagingTool.totalCount;
pagingTool.totalPage = pagingTool.totalCount % pagingTool.pageSize == 0 ? pagingTool.totalCount / pagingTool.pageSize : pagingTool.totalCount / pagingTool.pageSize + 1;
grid.dataProvider = xmlList;
//当页面装载以后 分页工具的当前页变成了第一页
pagingTool.current = 1;
pagingTool.beginNum = pagingTool.pageSize * pagingTool.current;
var array:Array = new Array();
for(var count:int = 0; count < pagingTool.totalPage; count++) {
array.push((count + 1) + "");
}
comb.dataProvider = array;
}
//下一页
private function nextCallback(e:ResultEvent):void {
var xml:XML = XML(e.result);
/**var xmlList:XMLList = xml.elements(store.node);*/
var xmlList:XMLList = new XMLList(xml.elements(store.node));
grid.dataProvider = xmlList;
pagingTool.current = pagingTool.current + 1;
comb.selectedIndex = pagingTool.current - 1;
}
private function next():void {
if(pagingTool.current == pagingTool.totalPage) {
return;
}
var http:HTTPService = new HTTPService();
http.url = store.url + "?time=" + new Date().getTime();
http.showBusyCursor = true;
http.resultFormat = "e4x";
http.method = "post";
http.addEventListener(ResultEvent.RESULT,nextCallback);
http.addEventListener(FaultEvent.FAULT,faultHand);
var params:URLVariables = pagingTool.params;
params.begin = pagingTool.current * pagingTool.pageSize;
params.size = pagingTool.pageSize;
http.send(params);
}
//上一页
private function privousCallback(e:ResultEvent):void {
var xml:XML = XML(e.result);
/**var xmlList:XMLList = xml.elements(store.node);*/
var xmlList:XMLList = new XMLList(xml.elements(store.node));
grid.dataProvider = xmlList;
pagingTool.current = pagingTool.current - 1;
comb.selectedIndex = pagingTool.current - 1;
}
private function privous():void {
if(pagingTool.current == 1) {
return;
}
var http:HTTPService = new HTTPService();
http.url = store.url + "?time=" + new Date().getTime();
http.showBusyCursor = true;
http.resultFormat = "e4x";
http.method = "post";
http.addEventListener(ResultEvent.RESULT,privousCallback);
http.addEventListener(FaultEvent.FAULT,faultHand);
var params:URLVariables = pagingTool.params;
//下一页的上一页 这里需要减去2
params.begin = (pagingTool.current-2) * pagingTool.pageSize;
params.size = pagingTool.pageSize;
http.send(params);
}
//Combox的处理方式
private function combChange(e:Event):void {
var comNum:int = int((ComboBox(e.target).selectedIndex) + 1);
combNum = comNum;
if(combNum == pagingTool.current) {
return;
} else {
var http:HTTPService = new HTTPService();
http.url = store.url + "?time=" + new Date().getTime();
http.showBusyCursor = true;
http.resultFormat = "e4x";
http.method = "post";
http.addEventListener(ResultEvent.RESULT,combCallback);
http.addEventListener(FaultEvent.FAULT,faultHand);
var params:URLVariables = pagingTool.params;
//下一页的上一页 这里需要减去2
params.begin = (combNum - 1) * pagingTool.pageSize;
params.size = pagingTool.pageSize;
http.send(params);
}
}
private function combCallback(e:ResultEvent):void {
var xml:XML = XML(e.result);
/**var xmlList:XMLList = xml.elements(store.node);*/
var xmlList:XMLList = new XMLList(xml.elements(store.node));
grid.dataProvider = xmlList;
pagingTool.current = combNum;
}
private function faultHand(e:FaultEvent):void {
trace(e.message + " FaultEvent");
}
]]>
</mx:Script>
<mx:HBox>
<mx:Button fontSize="12" label="上一页" click="privous()"/>
<mx:Button fontSize="12" label="下一页" click="next()"/>
<mx:ComboBox fontSize="12" id="comb" change="combChange(event)"/>
<mx:Label text="总共{bindTotal}条记录" fontWeight="bold" fontSize="12"/>
</mx:HBox>
</mx:Canvas>
具体用法介绍,在Demo中的某个Application运行时触发init方法
[Bindable]
private var ds:DataStore = new DataStore();
[Bindable]
private var pt:PagingTool = null;
private function init():void {
System.useCodePage = true;
ds.url = SharedObject.getLocal("config","/",false).data.server + "basic/Product";
trace("ds.url-->>>" + ds.url);
ds.node = "Product";
/**构造PagingTool 必须*/
pt = new PagingTool(ds);
pt.params.oper = "list";
//这里放进 查询参数
pageCom.grid = dg;
pageCom.store = ds;
pageCom.pagingTool = pt;
/**启动分页组件*/
pageCom.invoke();
}
STEP 1:指定DataStore的URL,也就是提供XML的URL
STEP 2:指定DataStore要读取的XML节点
STEP 3:指定PagingTool中显示数据的DataGrid(程序中的dg)
STEP 4:指定PagingTool的相关参数
STEP 5:启动分页组件
按照上面的方法,后台的产生的XML应该是这种格式
<任意名称> <Product> <读取的字段节点,根据实际需要> </读取的字段节点,根据实际需要> ....... </Product> <!-- N个Product节点,每个Product节点对应DataGrid的一条记录 --> <!-- 务必使用total来表示记录总数量 --> <total> 1800 </total> </任意名称>
核心程序介绍和大致的用法就是以上这些了,由于DEMO涉及到的代码比较繁杂,我就不提供附件下载了,各位在使用过程中如遇到什么疑问可以站内短信或留言联系
截个图: