Flex4自定义分页组件

最近因为项目需求，需要写个分页组件，我这人比较懒 一般写出来之后 就记下来供以后粘贴复制了 哈哈，希望大家学习的时候不要这样搞啊

下面贴出代码

PagingBar.mxml

<?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"
         xmlns:mx="library://ns.adobe.com/flex/mx" >
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.ItemClickEvent;
            import flash.events.KeyboardEvent;
            import mx.controls.DataGrid;
            import mx.validators.NumberValidator;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;
            [Bindable]
            [Embed(source='com/iman/sps/sheet/image/first.jpg')]
            public var firstIcon:Class;
            public var firstPage:uint;

            [Bindable]
            [Embed(source='com/iman/sps/sheet/image/pre.jpg')]
            public var preIcon:Class;
            public var prePage:uint;

            [Bindable]
            [Embed(source='com/iman/sps/sheet/image/next.jpg')]
            public var nextIcon:Class;
            public var nextPage:uint;

            [Bindable]
            [Embed(source='com/iman/sps/sheet/image/last.jpg')]
            public var lastIcon:Class;
            public var lastPage:uint;

            [Bindable]public var pageSize:int=15;//单页行数
            [Bindable]public var totalPage:int=1;//总页数
            [Bindable]public var currentPage:int=1;//当前页
            [Bindable]public var totalClum:int=0;//总记录数

            //分页函数
            public var localFunction:Function=null;

            //重新为当前页的变量赋值
            public function loadData(pageNum:int):void{
                this.pageSize = setPageSize.selectedItem.data as Number;
                this.totalPage =Math.ceil(this.totalClum/this.pageSize);
                if(pageNum>0 && pageNum<=this.totalPage){
                    this.currentPage=pageNum;
                    if(this.localFunction!=null){

                        localFunction(pageNum);
                    }else{
                        Alert.show("请设置回调方法！");
                    }
                }
            }

            //重新设置每页显示记录数
            public function changePagesize():void{
                //当前页首条记录的序号
                var currentPageRows:int=((this.currentPage-1)*this.pageSize);
                //Alert.show(String(currentPageRows));
                //重新设置以后，单页显示记录数
                this.pageSize = setPageSize.selectedItem.data as Number;
                //重新设置以后，总页数
                this.totalPage =Math.ceil(this.totalClum/this.pageSize);
                //重新调整当前页码
                //Alert.show(String(newPageNum));
                if(this.localFunction!=null){
                    localFunction(this.currentPage);
                }else{
                    Alert.show("请设置回调方法！");
                }
            }
        ]]>
    </fx:Script>
    <mx:Text id="temp" text="" visible="false" includeInLayout="false"/>
    <mx:HBox
        verticalGap="0"
        horizontalGap="0"
        horizontalAlign="center"
        verticalAlign="middle"
        >
        <mx:Text text="{'   共'+(totalClum)+'条记录'}" fontSize="12"/>
        <mx:Label   text="每页显示："/>
        <mx:ComboBox id="setPageSize" width="52" height="16" change="changePagesize()">
            <mx:dataProvider>
                <fx:Array>
                    <fx:Object label="15" data="15" />
                    <fx:Object label="20" data="20" />
                    <fx:Object label="30" data="30" />
                    <fx:Object label="40" data="40" />
                    <fx:Object label="50" data="50" />
                    <fx:Object label="60" data="60" />
                    <fx:Object label="70" data="70" />
                    <fx:Object label="80" data="80" />
                </fx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
        <mx:Label text="条"/>

        <mx:Button id="firstNavBtn" icon="{firstIcon}" width="10" height="10" click="loadData(1)" enabled="{lbtnPrevious.enabled}"/>
        <mx:LinkButton id="lbtnFirst" label="首页" click="loadData(1)" enabled="{lbtnPrevious.enabled}" fontSize="12"/>

        <mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="loadData(currentPage-1)" enabled="{currentPage!=1?true:false}"/>
        <mx:LinkButton id="lbtnPrevious" label="上一页" click="loadData(currentPage-1)" enabled="{currentPage!=1?true:false}" fontSize="12"/>

        <mx:Text text="{'【 '+(Math.ceil(this.totalClum/this.pageSize)>0?(currentPage):1)+'/'+(Math.ceil(this.totalClum/this.pageSize)>0?Math.ceil(this.totalClum/this.pageSize):1)+'页】  '}" fontSize="12"/>

        <mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="loadData(currentPage+1)" enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}"/>
        <mx:LinkButton id="lbtnNext" label="下一页" click="loadData(currentPage+1)" enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}" fontSize="12"/>

        <mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="loadData(Math.ceil(this.totalClum/this.pageSize))" enabled="{lbtnNext.enabled}"/>
        <mx:LinkButton id="lbtnLast" label="尾页" click="loadData(Math.ceil(this.totalClum/this.pageSize))" enabled="{lbtnNext.enabled}" fontSize="12"/>

        <mx:Label text="跳转到"/>
        <mx:NumericStepper id="nsPageNum" width="50" height="22" stepSize="1" minimum="1" maximum="{Math.ceil(this.totalClum/this.pageSize)}" enabled="{lbtnJump.enabled}" cornerRadius="0" fontSize="12"/>
        <mx:Label text="页"/>
        <mx:LinkButton id="lbtnJump" label="GO"  click="loadData(nsPageNum.value)" enabled="{Math.ceil(this.totalClum/this.pageSize)>1?true:false}" fontSize="12"/>

    </mx:HBox>
</mx:HBox>

<?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" xmlns:mx="library://ns.adobe.com/flex/mx" > <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.events.ItemClickEvent; import flash.events.KeyboardEvent; import mx.controls.DataGrid; import mx.validators.NumberValidator; import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import mx.controls.Alert; [Bindable] [Embed(source='com/iman/sps/sheet/image/first.jpg')] public var firstIcon:Class; public var firstPage:uint; [Bindable] [Embed(source='com/iman/sps/sheet/image/pre.jpg')] public var preIcon:Class; public var prePage:uint; [Bindable] [Embed(source='com/iman/sps/sheet/image/next.jpg')] public var nextIcon:Class; public var nextPage:uint; [Bindable] [Embed(source='com/iman/sps/sheet/image/last.jpg')] public var lastIcon:Class; public var lastPage:uint; [Bindable]public var pageSize:int=15;//单页行数 [Bindable]public var totalPage:int=1;//总页数 [Bindable]public var currentPage:int=1;//当前页 [Bindable]public var totalClum:int=0;//总记录数 //分页函数 public var localFunction:Function=null; //重新为当前页的变量赋值 public function loadData(pageNum:int):void{ this.pageSize = setPageSize.selectedItem.data as Number; this.totalPage =Math.ceil(this.totalClum/this.pageSize); if(pageNum>0 && pageNum<=this.totalPage){ this.currentPage=pageNum; if(this.localFunction!=null){ localFunction(pageNum); }else{ Alert.show("请设置回调方法！"); } } } //重新设置每页显示记录数 public function changePagesize():void{ //当前页首条记录的序号 var currentPageRows:int=((this.currentPage-1)*this.pageSize); //Alert.show(String(currentPageRows)); //重新设置以后，单页显示记录数 this.pageSize = setPageSize.selectedItem.data as Number; //重新设置以后，总页数 this.totalPage =Math.ceil(this.totalClum/this.pageSize); //重新调整当前页码 //Alert.show(String(newPageNum)); if(this.localFunction!=null){ localFunction(this.currentPage); }else{ Alert.show("请设置回调方法！"); } } ]]> </fx:Script> <mx:Text id="temp" text="" visible="false" includeInLayout="false"/> <mx:HBox verticalGap="0" horizontalGap="0" horizontalAlign="center" verticalAlign="middle" > <mx:Text text="{' 共'+(totalClum)+'条记录'}" fontSize="12"/> <mx:Label text="每页显示："/> <mx:ComboBox id="setPageSize" width="52" height="16" change="changePagesize()"> <mx:dataProvider> <fx:Array> <fx:Object label="15" data="15" /> <fx:Object label="20" data="20" /> <fx:Object label="30" data="30" /> <fx:Object label="40" data="40" /> <fx:Object label="50" data="50" /> <fx:Object label="60" data="60" /> <fx:Object label="70" data="70" /> <fx:Object label="80" data="80" /> </fx:Array> </mx:dataProvider> </mx:ComboBox> <mx:Label text="条"/> <mx:Button id="firstNavBtn" icon="{firstIcon}" width="10" height="10" click="loadData(1)" enabled="{lbtnPrevious.enabled}"/> <mx:LinkButton id="lbtnFirst" label="首页" click="loadData(1)" enabled="{lbtnPrevious.enabled}" fontSize="12"/> <mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="loadData(currentPage-1)" enabled="{currentPage!=1?true:false}"/> <mx:LinkButton id="lbtnPrevious" label="上一页" click="loadData(currentPage-1)" enabled="{currentPage!=1?true:false}" fontSize="12"/> <mx:Text text="{'【 '+(Math.ceil(this.totalClum/this.pageSize)>0?(currentPage):1)+'/'+(Math.ceil(this.totalClum/this.pageSize)>0?Math.ceil(this.totalClum/this.pageSize):1)+'页】 '}" fontSize="12"/> <mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="loadData(currentPage+1)" enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}"/> <mx:LinkButton id="lbtnNext" label="下一页" click="loadData(currentPage+1)" enabled="{Math.ceil(this.totalClum/this.pageSize)>(currentPage)?true:false}" fontSize="12"/> <mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="loadData(Math.ceil(this.totalClum/this.pageSize))" enabled="{lbtnNext.enabled}"/> <mx:LinkButton id="lbtnLast" label="尾页" click="loadData(Math.ceil(this.totalClum/this.pageSize))" enabled="{lbtnNext.enabled}" fontSize="12"/> <mx:Label text="跳转到"/> <mx:NumericStepper id="nsPageNum" width="50" height="22" stepSize="1" minimum="1" maximum="{Math.ceil(this.totalClum/this.pageSize)}" enabled="{lbtnJump.enabled}" cornerRadius="0" fontSize="12"/> <mx:Label text="页"/> <mx:LinkButton id="lbtnJump" label="GO" click="loadData(nsPageNum.value)" enabled="{Math.ceil(this.totalClum/this.pageSize)>1?true:false}" fontSize="12"/> </mx:HBox> </mx:HBox>

在其他组件中引用 其中common 是我自定义的标签 里面引入了这个分页组件的所在位置 例如： xmlns:common="com.iman.common.*"

 

<common:PagingBar width="100%" height="5%" id="pageBar">
        </common:PagingBar>

<common:PagingBar width="100%" height="5%" id="pageBar"> </common:PagingBar>

 

写完之后说说怎么用。里面每次改变分页某个属性 就会触发一个叫做localFunction的函数 这个函数是对外暴漏给引用页面来实现他的功能的

下面是一个示例代码：作用是 首先设置初始页 然后获得 每页显示的数据记录条数 然后 实现分页组件暴露出来的分页功能函数

protected function test_clickHandler(event:MouseEvent):void
        {   firstStart=0;
            pagesize=pageBar.pageSize;
            pageBar.localFunction=fun;

                          }

protected function test_clickHandler(event:MouseEvent):void { firstStart=0; pagesize=pageBar.pageSize; pageBar.localFunction=fun; }

下面我们来实现这个函数 也就是fun 这个fun获得当前页数  因为后台调用了Oracle实现的分页查询 所以我要算出数据从第几条开始 到第几条结束 然后就是调用查询方法了

public function fun(pageNo:int):void
        {
            this.firstStart=(pageNo - 1) * pageBar.pageSize;
            pagesize=pageBar.pageSize;
            commonQuery.commonQuery(firstStart, pagesize, commonQueryData,accountInfo);
        }

public function fun(pageNo:int):void { this.firstStart=(pageNo - 1) * pageBar.pageSize; pagesize=pageBar.pageSize; commonQuery.commonQuery(firstStart, pagesize, commonQueryData,accountInfo); }