源码:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="initHandler(event)"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" verticalAlign="middle">
<!--
/**
这里注意,有四个重要的参数需要传递:
1.pageSize:页面大小,每页显示多少条刻录,如果不传递,则按每页10条显示;
2.destination:服务名称,具体可以参考代码;
3.methodName:服务调用的方法,具体可以参考代码
4.datagrid:使用分页的datagrid
<p>
<code>
<control:PagingBar id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userAdg}" pageSize="3"
destination="userFlexServices" methodName="getUsers" height="26" width="100%" />
</code>
</p>
*/
-->
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.DataGrid;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.RemoteObject;
import spark.events.IndexChangeEvent;
[Bindable]//记录数
private var _items:ArrayCollection;
[Bindable]//分页参数
private var _params:Array = new Array();
[Bindable]//每页显示的条数
private var pageSizeBoxListData:ArrayCollection = new ArrayCollection([
{pageSize:10},
{pageSize:20},
{pageSize:30},
{pageSize:50},
{pageSize:100}
]);
[Bindable]//每页显示的记录数
public var pageSize:int = 10;
[Bindable]//当前页
public var curpage:int = 1;
[Bindable]//下一页到多少记录数
public var offset:int = 1;
[Bindable]//总页数
public var totalPage:int = 0;
[Bindable]//总记录数
private var _allRecorders:int = 263;
private var _destination:String;
private var _methodName:String;
[Bindable]//组件宽度
public var widthTo:int;
//服务请求地址
public var url:String;
[Bindable]//datagrid
private var _datagrid:DataGrid;
public function get datagrid():DataGrid
{
return _datagrid;
}
public function set datagrid(value:DataGrid):void
{
_datagrid = value;
}
public function get items():ArrayCollection
{
return _items;
}
public function set items(value:ArrayCollection):void
{
_items = value;
}
public function get params():Array
{
return _params;
}
public function set params(value:Array):void
{
_params = value;
}
public function get methodName():String
{
return _methodName;
}
public function set methodName(value:String):void
{
_methodName = value;
}
public function get allRecorders():int
{
return _allRecorders;
}
public function set allRecorders(value:int):void
{
_allRecorders = value;
}
public function get destination():String
{
return _destination;
}
public function set destination(value:String):void
{
_destination = value;
}
/**
*
*/
protected function progressBarClickHandler(event:MouseEvent):void
{
var bc:HBox = HBox(event.target);
widthTo = event.localX;
//progressBarEffect.target = progressBarPagerBlue;
//progressBarEffect.play();
}
/**
*
*/
private function getMinimum():int
{
if(allRecorders < 1)
{
return 0;
}
else
{
return 1;
}
}
/**
*
*/
protected function pageFirstClickHandler(event:MouseEvent):void
{
curpage = getMinimum();
getBtnEnabled();
pagingRemoteObject();
}
/**
* 上一页
*/
protected function pagePrevClickHandler(event:MouseEvent):void
{
var tempNum:int = getMinimum();
curpage = curpage - 1;
getBtnEnabled();
pagingRemoteObject();
}
/**
* 跳转到指定页
*/
protected function pageStepperClickHandler(event:MouseEvent):void
{
curpage = pageStepper.value;
}
/**
* 下一页
*/
protected function pageNextClickHandler(event:MouseEvent):void
{
if(curpage < totalPage)
{
curpage = curpage + 1;
}
getBtnEnabled();
pagingRemoteObject();
}
/**
* 最后一页
*/
protected function pageLastClickHandler(event:MouseEvent):void
{
curpage = totalPage;
getBtnEnabled();
pagingRemoteObject();
}
/**
* 刷新当前页
*/
protected function pageRefreshClickHandler(event:MouseEvent):void
{
totalPage = getTotalPageNum();
pagingRemoteObject();
}
/**
* 初始化函数
*/
protected function initHandler(event:FlexEvent):void
{
//totalPage = getTotalPageNum();
//pagingRemoteObject();
}
/**
* 设置每页显示多少条记录
*/
protected function pageSizeComboboxChangeHandler(event:IndexChangeEvent):void
{
var obj:Object = pageSizeCombobox.selectedItem;
pageSize = obj.pageSize;
trace(url,"",pageSize);
}
/**
* 求总页面数
* //计算总页面数-->总页数=(总记录数+每页显示的记录数-1)/每页显示的记录数
* */
private function getTotalPageNum():int
{
return (allRecorders + pageSize - 1) / pageSize;
}
/**
* 获取总页数
*/
private function getBtnEnabled():void
{
if(totalPage<=1)//所有按钮全灰掉
{
pageFirstBtn.enabled = false;
pagePrevBtn.enabled = false;
pageNextBtn.enabled = false;
pageLastBtn.enabled = false;
pageRefreshBtn.enabled = false;
}else if(curpage==1){ //当前在第一页
pageFirstBtn.enabled = false;
pagePrevBtn.enabled = false;
pageNextBtn.enabled = true;
pageLastBtn.enabled = true;
pageRefreshBtn.enabled = true;
}else if(curpage<totalPage && curpage > 1){ //当前在中间页数,不在第一页也不在最后一页
pageFirstBtn.enabled = true;
pagePrevBtn.enabled = true;
pageNextBtn.enabled = true;
pageLastBtn.enabled = true;
pageRefreshBtn.enabled = true;
}else if(curpage==totalPage){ //当前在最后一页
pageFirstBtn.enabled = true;
pagePrevBtn.enabled = true;
pageNextBtn.enabled = false;
pageLastBtn.enabled = false;
pageRefreshBtn.enabled = true;
}
/**如果有页数则刷新可用*/
if(totalPage > 0)
{
pageRefreshBtn.enabled = true;
}else{
pageRefreshBtn.enabled = false;
}
}
/**
* 服务请求成功的处理
*/
private function serviceSuccessResult(event:ResultEvent):void
{
var results:ArrayCollection = ArrayCollection(event.result.list);
trace(url,"请求成功,共"+_allRecorders+"条记录","每页显示",results,"\n当前页",curpage);
datagrid.dataProvider = results;
totalPage = getTotalPageNum();
pageStepper.value = curpage;
getBtnEnabled();
//发事件到上级视图
this.dispatchEvent(new Event("myFunction"));
}
/**
* 服务请求失败的处理
*/
private function httpServiceFault(event:FaultEvent):void
{
Alert.show(event.fault.message,"服务请求失败");
}
/**
* 发送服务请求
*/
private function pagingRemoteObject():void
{
var remote:RemoteObject = new RemoteObject(destination);
//页面偏移量这里计划好了,java不需要计算了
offset = (curpage - 1)*pageSize;
remote.getOperation(methodName).send(pageSize,offset);
remote.addEventListener(ResultEvent.RESULT,serviceSuccessResult);
remote.addEventListener(FaultEvent.FAULT,httpServiceFault);
}
/**
*
*/
private function loadingDatagrid():void
{
}
protected function refrePageBtnClickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
private function pageHSliderChangeHandler(event:Event):void
{
curpage = pageStepper.value;
getBtnEnabled();
pagingRemoteObject();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Metadata>
[Event(name="myFunction",type="flash.events.Event")]
</fx:Metadata>
<mx:HBox width="30%" height="100%" verticalAlign="middle">
<mx:LinkButton styleName="pageFirstBtn" id="pageFirstBtn" enabled="false" click="pageFirstClickHandler(event)" />
<mx:LinkButton styleName="pagePrevBtn" id="pagePrevBtn" enabled="false" click="pagePrevClickHandler(event)" />
<mx:LinkButton styleName="pageNextBtn" id="pageNextBtn" click="pageNextClickHandler(event)" />
<mx:LinkButton styleName="pageLastBtn" id="pageLastBtn" enabled="true" click="pageLastClickHandler(event)" />
<mx:HBox width="40%" height="100%" verticalAlign="middle">
<s:Label text="Page" />
<s:NumericStepper id="pageStepper" width="78" click="pageStepperClickHandler(event)"
maximum="{totalPage}" minimum="{_allRecorders!=0?1:0}" value="{curpage}" />
<s:Label text=" Of " />
<s:Label id="totalPageLab" text="{totalPage}" />
<mx:LinkButton id="refrePageBtn" click="refrePageBtnClickHandler(event)" styleName="myRrfreshBtn" />
</mx:HBox>
</mx:HBox>
<mx:HBox verticalAlign="middle">
<s:ComboBox dataProvider="{pageSizeBoxListData}" skinClass="assets.skin.ComboBoxTextInputEditSkin" selectedIndex="1" width="60" labelField="pageSize"
id="pageSizeCombobox" change="pageSizeComboboxChangeHandler(event)"/>
</mx:HBox>
<mx:LinkButton styleName="pageRefreshBtn" id="pageRefreshBtn" click="pageRefreshClickHandler(event)"/>
<mx:HBox width="100%" height="100%" click="progressBarClickHandler(event)" verticalAlign="middle">
<s:HSlider width="98%" stepSize="1" dataTipPrecision="0"
maximum="{totalPage}" minimum="{_allRecorders!=0?1:0}" value="{curpage}" change="pageHSliderChangeHandler(event)"/>
</mx:HBox>
<s:BorderContainer x="0" y="0" width="40%" height="20" borderColor="0x336699" textAlign="center" visible="false">
<s:Group id="hgimg" x="0" y="0" width="100%" height="100%" clipAndEnableScrolling="true">
<mx:HBox width="60%" height="18" styleName="progressBarPageBlue" id="progressBarPageBlue">
</mx:HBox>
<mx:HBox width="96%" height="100%" paddingLeft="3" x="2" horizontalAlign="center" verticalAlign="middle">
<s:Label text="Displaying "/>
<s:Label text="{pageSize*curpage - 1 - pageSize}" id="pageStartLab"/>
<s:Label text="-"/>
<s:Label text="{pageSize*curpage - 1}" id="pageSizeLab"/>
<s:Label text="of"/>
<s:Label text="{_allRecorders}" id="allRecordsLab"/>
</mx:HBox>
</s:Group>
</s:BorderContainer>
</mx:HBox>
引用:
<components:Pager id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userDataGrid}" pageSize="3"
destination="userFlexServices" methodName="getUsers" height="26" width="100%" />
<mx:DataGrid id="userDataGrid" headerStyleName="myHead" dataProvider="{userArray}"
rowCount="{userArray.length}" textAlign="center" width="100%" height="100%"
verticalGridLineColor="#CCCCCC" horizontalGridLines="true" horizontalGridLineColor="#CCCCCC">
<mx:columns>
<mx:DataGridColumn headerText="序号" itemRenderer="{new ClassFactory(indexRenderer)}" width="50" />
<mx:DataGridColumn headerText="登陆帐号" dataField="userAccount" textAlign="left" width="160" />
<mx:DataGridColumn headerText="用户姓名" dataField="userName" textAlign="left" width="160" />
<mx:DataGridColumn headerText="手机号" dataField="userMobile" textAlign="left" width="160" />
<mx:DataGridColumn headerText="工号状态" dataField="status" textAlign="center" width="80" />
<mx:DataGridColumn headerText="用户角色" dataField="userRolesNames" textAlign="left" width="180"/>
<!--
<mx:DataGridColumn headerText="详情" textAlign="center" width="78">
<mx:itemRenderer>
<fx:Component>
<mx:HBox textAlign="center" verticalAlign="middle" horizontalAlign="center">
<mx:LinkButton label="" click="outerDocument.detailedBtnClickHandler(event)" icon="@Embed(source='assets/images/detail.jpg')"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
-->
<mx:DataGridColumn headerText="用户说明" dataField="userDesc" />
</mx:columns>
</mx:DataGrid>
<components:Pager id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userDataGrid}" pageSize="3"
myFunction="serverPagingBarFunctionHandler(event)"
destination="userFlexServices" methodName="getUsers" height="26" width="100%" />