`
hdxiong
  • 浏览: 375271 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex中分页控件以及实例

    博客分类:
  • Flex
阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:mydg="*">
    <mx:Script>
        <![CDATA[
       /*
            自定义datagrid控件元素
            总共的页数
            当前页面的页码
            所有的记录数
            当前也的记录
            没有翻页的记录
            
        */
            import mx.collections.ArrayCollection;
            [Bindable]
            private var mypagedata:ArrayCollection = new ArrayCollection();//当前也没种该显示的记录
            [Bindable]
            public var mygridcolumns:Array;
            public var mydata:ArrayCollection;//所有的数据
            public var pagecount:int=20;//表示每页记录的条数,默认10条,可以由用户自行定义
            public var curpage:int;//当前的页码
            public var totalpage:int;//一共的页数
            public var totalcount:int;//一共的记录条数
            
            public function initdata(value:ArrayCollection):void
            {
                mydata = value;//将所有数据都赋值给mydata变量
                mypagedata.removeAll();//移出当前页面中所有数据记录
                
                if(mydata.length>0 && null!=mydata)
                {
                    totalcount = mydata.length;
                    totalpage = (totalcount + pagecount - 1) / pagecount;
                    setPager(0);
                    inputpage.minimum=1;
                    inputpage.maximum=totalpage;
                }else{
                    totalcount = 0;
                    totalpage = 0;
                    curpage = 0;
                    inputpage.minimum = 0;
                    inputpage.maximum = 0;
                    pagedetail.text = "第0页/共0页   共0条纪录";
                }
            }
            public function setPager(value:int):void
            {
                if(value<0 || value>=totalpage) return;
                curpage = value;
                var curNum:int = value*pagecount;//计算出要跳转到的页面种的第一条记录在所有的记录种是第几条记录
                mypagedata.removeAll();//移出变量中的数据,以便插入新数据,页面中显示的是这个变量中的数据
                for(var i:int=0;curNum<mydata.length&&i<pagecount;i++,curNum++)
                //循环的次数既要小于所有的记录数,也要小于每个页面能显示的记录数;并且curNum变量中的值也要增加
                {
                    mypagedata.addItem(mydata.getItemAt(curNum));//依次抽取记录
                }
                var temp:int = curpage+1;//页码中第一张页面是0,也就是说实际显示的页码是+1后的值
                pagedetail.text = "第"+temp+"页/共"+totalpage+"页   共条"+totalcount+"记录";
            }
        ]]>
    </mx:Script>
    
    <mx:DataGrid id="cudg" dataProvider="{mypagedata}" 
     columns="{mygridcolumns}" width="100%" height="100%">
    </mx:DataGrid>
    <mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle">
        <!--<mx:LinkButton label="全选"/>
        <mx:LinkButton label="全不选"/>-->
        <mx:Spacer width="100%" height="1"></mx:Spacer>
        <mx:Label text="第0页/共0页" id="pagedetail"/>
        <mx:LinkButton label="首页" click="setPager(0)"/>
        <mx:LinkButton label="上一页" click="setPager(curpage-1)"/>
        <mx:LinkButton label="下一页" click="setPager(curpage+1)"/>
        <mx:LinkButton label="末页" click="setPager(totalpage-1)"/>
        <mx:NumericStepper id="inputpage" stepSize="1" minimum="0" maximum="0" cornerRadius="0"/>
        <mx:LinkButton label="跳转" click="setPager(inputpage.value-1)"/>
    </mx:HBox>
</mx:VBox>

******************************************************************************

<nsl:customgrid x="10" y="34" fontSize="12" id="mydatagrid1" height="536" width="30%" color="#0B333C">
          <nsl:mygridcolumns>
           <mx:DataGridColumn headerText="名次" dataField="rank" backgroundColor="haloSilver"/>
           <mx:DataGridColumn headerText="用户id" dataField="userid" backgroundColor="white"/>
           <mx:DataGridColumn headerText="姓名" dataField="name" backgroundColor="white"/>
           <mx:DataGridColumn headerText="经验总数" dataField="allexperience" backgroundColor="haloSilver"/>
          </nsl:mygridcolumns>
         </nsl:customgrid >



使用方法
<PageSelector id="pageSelector" 

                             numPagesToDisplay="5"    <!--当前界面一次显示几页-->

                             pageSelected="kmfspx(kmfstaxis)"  <!---->

                             borderStyle="none"  

                            showZero="0"    <!--是否显示0  及如果有100页 第一页显示为 001 -->

                            MaxRows="1212"   <!--拥有的记录数-->

                           SimplePageRows="20"  <!--多少条记录是一页-->

/>

查询时要用到的变量有  

as 文件中        pageSelector.Startrow  当前选择页对应的数据库开始记录 

                        pageSelector.Endrow   当前选择页对应的数据库结束记录 

 

PageSelector.mxml 文件内容

<?xml version="1.0" encoding="utf-8"?>
<!--
 
-->
<mx:HBox xmlns:mx="http://www.macromedia.com/2003/mxml" visible="{totalPages > 0}" horizontalGap="-1" >

    <mx:Script>
        <![CDATA[

        private var __currentPage : Number = 1;
        private var __totalPages : Number = 0;
        private var repeaterStartIndex : Number = 0;
        private var pageStringLength : Number;
        private var currentButton : mx.controls.Link;
       
        public var __showZero:Number=0;
  
  private var __MaxRows: Number =0;//得到的总行数
  private var __SimplePageRows: Number;//单页要有的行数

 

  //通过页数计算开始记录数
  function get Startrow():Number
  {
   return (((currentPage-1)*SimplePageRows)+1);
  }
  
  //返回当前页的结束记录数
  function get Endrow():Number
  {
   var re:Number=0;
   if (currentPage != totalPages)
   {
    re = currentPage*SimplePageRows;
   }
   else if (currentPage == totalPages)
   {
    re =MaxRows;
   }
   
   return re;
  }


        [ChangeEvent("MaxRowsChanged")]
        function get showZero() : Number
        {
            return __showZero;
        }
          
       function set showZero(tp : Number) : Void
        {
         __showZero=tp;
         mathcountpage();
  }


  
        [ChangeEvent("MaxRowsChanged")]
        function get MaxRows() : Number
        {
            return __MaxRows;
        }
          
       function set MaxRows(tp : Number) : Void
        {
         __MaxRows=tp;
         mathcountpage();
  }

        [ChangeEvent("SimplePageRowsChanged")]
        function get SimplePageRows() : Number
        {
            return __SimplePageRows;
        }
          
       function set SimplePageRows(tp : Number) : Void
        {
         __SimplePageRows=tp;
         mathcountpage();
  }
  
  function mathcountpage()
  {
   var a:Number = __MaxRows ;
   var b:Number = __SimplePageRows;
         totalPages =(a -(a%b))/b +(((a%b)>0)?1:0);   
  }
  
        [ChangeEvent("pageArrayChanged")]
        private var pageArray : Array;

        public var numPagesToDisplay : Number;

        [ChangeEvent("pageSelected")]
        function get currentPage() : Number
        {
            return __currentPage;
        }

        function set currentPage(cp : Number) : Void
        {
            __currentPage = cp;
            dispatchEvent({type: 'pageSelected'});
        }

        [ChangeEvent("totalPagesChanged")]
        function get totalPages() : Number
        {
            return __totalPages;
        }

        function set totalPages(tp : Number) : Void
        {
            __totalPages = tp;
            if (pageArray == null) pageArray = new Array();
            if (tp > pageArray.length)
            {
                for (var i = pageArray.length+1; i <= tp; ++i)
                {
                    pageArray.push(i);
                }
            }
            else if (tp < pageArray.length)
            {
                pageArray.splice(tp);
            }

            pageStringLength = String(tp).length;

            dispatchEvent({type: 'totalPagesChanged'});
            dispatchEvent({type: 'pageArrayChanged'});
        }

        private function moveToBeginning()
        {
            repeaterStartIndex = 0;
            updateCurrentButton(undefined);
        }

        private function moveToEnd()
        {
            var mod = totalPages % numPagesToDisplay;
            if (mod == 0) mod = numPagesToDisplay;
            repeaterStartIndex = totalPages - mod;
            updateCurrentButton(undefined);
        }

        private function previousPageGroup()
        {
            if (repeaterStartIndex - numPagesToDisplay >= 0)
            {
                updateCurrentButton(undefined);
                repeaterStartIndex -= numPagesToDisplay;
            }
        }

        private function nextPageGroup()
        {
            if (repeaterStartIndex + numPagesToDisplay < totalPages)
            {
                updateCurrentButton(undefined);
                repeaterStartIndex += numPagesToDisplay;
            }
        }

        private function selectPage(page) : Void
        {
            currentPage = page.getRepeaterItem();
            updateCurrentButton(page);
        }

        function updateCurrentPage(newCurrentPage : Number) : Void
        {
            var butIndex = newCurrentPage % numPagesToDisplay;
            repeaterStartIndex = newCurrentPage - butIndex;
            selectPage(pageButton[butIndex]);
        }

        private function updateCurrentButton(cb : mx.controls.Link) : Void
        {
            if (currentButton != undefined)
            {
                currentButton.setStyle("color", undefined);
            }
            if (cb != undefined)
            {
                cb.setStyle("color", 0xAA0000);
            }
            currentButton = cb;
        }

        private function formatPageNumber(num : Number) : String
        {
            var str : String = String(num);
            var diff : Number = pageStringLength - str.length;      
            if (showZero==1)    
            switch(diff)
            {
                case 0 : return str;
                case 1 : return "0" + str;
                case 2 : return "00" + str;
                case 3 : return "000" + str;
                case 4 : return "0000" + str;
                case 5 : return "00000" + str;
                default : return str; //don't worry about it
            }
            else
            {
             return str;
            }
  
 
        }

        ]]>
    </mx:Script>

    <mx:Metadata>
        [Event("pageSelected")]
    </mx:Metadata>

    <mx:Link id="beginningButton" icon="@Embed('left2.jpg')"  height="22" click="moveToBeginning()" enabled="{repeaterStartIndex > 0}"/>

    <mx:Link id="prevPageButton" icon="@Embed('left.jpg')"  height="22" click="previousPageGroup()" enabled="{repeaterStartIndex > 0}"/>
    <mx:Repeater id="pageRepeater" dataProvider="{pageArray}" recycleChildren="true"
        startingIndex="{repeaterStartIndex}" count="{numPagesToDisplay}">

        <mx:Link id="pageButton" label="{formatPageNumber(pageRepeater.currentItem)}" click="selectPage(event.target)" />

    </mx:Repeater>
    <mx:Link id="nextPageButton" icon="@Embed('right.jpg')" height="22" click="nextPageGroup()" enabled="{repeaterStartIndex + numPagesToDisplay &lt; totalPages}"/>
    <mx:Link id="endButton" icon="@Embed('right2.jpg')"  height="22"  click="moveToEnd()" enabled="{repeaterStartIndex + numPagesToDisplay &lt; totalPages}"/>

</mx:HBox>


---------------------
发一个flex分页控件的源码
参照airia.cn上面的代码,自己重写了这个分页控件,代码呈上,不足之处请指正。
1)、定义一个“页面改变事件”
package

{
        import flash.events.Event;

        public class PageChangeEvent extends Event

        {

                private var _pageIndex:int;

                private var _pageSize:int;

                public static const CHANGED:String="PageChange";

                public function PageChangeEvent(type:String,pageIndex:int,pageSize:int)

                {

                        super(type);

                        _pageIndex=pageIndex;

                        _pageSize=pageSize;

                }

                public function fitler(rs:Array):Array

                {

                        //这个方法依据构造此“事件类”时的参数过滤出当前页面要显示的记录,返回一个数组

                        var newRs:Array=new Array();

                        

                        var start:int=_pageIndex*_pageSize;

                        var end:int=start+_pageSize;

                        for(var i:int=start;i<end;i++)

                        {

                                if(i<rs.length)

                                {                                        

                                        newRs.push(rs[i]);

                                }

                                else

                                {

                                        break;

                                }

                        }                        

                        return newRs;

                }

                

        }

}


2)、定义一个分页的组件
<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="506" height="46">

        <mx:Metadata>

                [Event(name="PageChange",type="PageChangeEvent",bubbles="true",cancelable="true" )]

        </mx:Metadata>

        <mx:HBox width="100%" height="100%" x="0" y="0" horizontalAlign="center" verticalAlign="middle" fontSize="15">        

                <mx:Button click="firstPage()" id="firstBtn" label="首页"/>

                <mx:Button click="prevPage()" id="prevBtn" label="上一页"/>

                <mx:ComboBox id="cb" change="cbChange()" width="68"/>

                <mx:Button click="nextPage()" id="nextBtn" label="下一页"/>

                <mx:Button click="lastPage()" id="lastBtn" label="末页"/>

                <mx:Label id="pageInfo" width="123"/>        

        </mx:HBox>

        <mx:Script>

        <![CDATA[

                //总记录数

                private var mRecordCount:int=0;

                //每页要显示的记录数,默认为20 

                private var mPageSize:int =20;

                //起始页的索引 

                private var mPageIndex:int =0;

                //总页数 

                private var mPageCount:int = 0; 

                public function prevPage():void 

                { 

                        mPageIndex-=1; 

                        setState(); 

                } 

                public function firstPage():void 

                { 

                        mPageIndex =0; 

                        setState(); 

                } 

                public function nextPage():void 

                { 

                        mPageIndex+=1; 

                        setState(); 

                } 

                public function lastPage():void 

                { 

                        mPageIndex=mPageCount-1; 

                        setState(); 

                } 

                //以上几个方法一样,就不说了

                public function cbChange():void 

                { 

                        //依据下拉列表来获得当前的页索引值

                        mPageIndex = cb.selectedItem.data; 

                        setState(); 

                } 

                //设置记录总数 

                public function set RecordCount(value:int):void 

                { 

                        //设置记录的总数

                        if(value<0)

                        {

                                value=0;

                        }

                        mRecordCount= value;  

                        setState(); 



                }

                public function set pageSize(value:int):void

                {

                        if(value>mRecordCount)

                        {

                                value=mRecordCount;

                        }

                        if(value<1)

                        {

                                value=1;

                        }

                        mPageSize=value;

                        setState()

                        

                }

                private function setState():void 

                { 

                        if(mRecordCount%mPageSize > 0) 

                        { 

                                //“求模”算出一共有多少页

                                mPageCount = mRecordCount/mPageSize+1; 

                        } 

                        else 

                        { 

                                mPageCount = mRecordCount/mPageSize; 

                        } 

                        //建一个数组做为combobox的数据源,用来跳转页

                        var pages:Array = new Array(); 

                        for(var i:int=1;i<=mPageCount;i++) 

                        { 

                                pages.push({label:i.toString(),data:i-1}); 

                        } 

                        cb.dataProvider= pages; 

                        cb.selectedIndex= mPageIndex; 

                        if(mPageCount>1)

                        {

                                firstBtn.enabled=true;

                                nextBtn.enabled=true;

                                prevBtn.enabled=true;

                                lastBtn.enabled=true;

                                if(mPageIndex==0) 

                                { 

                                        prevBtn.enabled=false; 

                                        firstBtn.enabled=false; 

                                } 

                                if(mPageIndex == mPageCount-1) 

                                { 

                                        nextBtn.enabled=false; 

                                        lastBtn.enabled=false; 

                                }

                        }

                        else

                        {

                                firstBtn.enabled=false;

                                nextBtn.enabled=false;

                                prevBtn.enabled=false;

                                lastBtn.enabled=false;

                        }

                        pageInfo.text=mRecordCount+"记录/" + mPageCount+"页"; 

                        OnPageChange(); 

                }  

                //打开分页控件 

                public function Open():void{ 

                        mPageIndex =0; 

                        OnPageChange(); 

                } 



                private function OnPageChange():void 

                { 

                        //依据当前页面索引和每页记录数来构造一个“页面改变事件”

                        var e:PageChangeEvent = new PageChangeEvent(PageChangeEvent.CHANGED,mPageIndex,mPageSize); 

                        dispatchEvent(e); 

                } 
                ]]> 
        </mx:Script>
</mx:Canvas>


3)、测试用的主类
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="oninit()" layout="absolute" xmlns:ns1="myCompments.*" fontSize="16">

        <mx:Script>

                <![CDATA[

                        import flash.events.Event;

                        private var newsList:Array;

                        private function oninit():void

                        {

                                newsList=new Array();

                                for(var i:int=0;i<1111;i++)

                                {

                                        newsList.push({userName:"myName"+i,userData:i});

                                }

                                //设定要分页的总记录数                        

                                myPageBar.RecordCount=newsList.length;

                                //设定每页要显示的记录数

                                myPageBar.pageSize=50;

                                //启用分页控件

                                myPageBar.Open();

                        }

                        private function pageChanged(e:PageChangeEvent):void

                        {

                                dataList.dataProvider=e.fitler(newsList);                                

                        }

                ]]>

        </mx:Script>

        <mx:DataGrid x="54" y="44" width="543" height="227" id="dataList">

                <mx:columns>

                        <mx:DataGridColumn headerText="用户名" dataField="userName"/>

                        <mx:DataGridColumn headerText="数据" dataField="userData"/>

                </mx:columns>

        </mx:DataGrid>

        <ns1:PageBar x="54" y="279" width="543" id="myPageBar" PageChange="pageChanged(event)">

        </ns1:PageBar>

</mx:Application>

--------------------------------------------------------------------
分享到:
评论

相关推荐

    flex 3 所有可视控件实例

    通过这些控件的实例,开发者可以了解到每个控件的默认行为、属性、事件以及如何自定义它们以满足特定需求。Flex 3 的组件库还包括其他许多控件,如 Vscrollbar、Vslider、Accordion、Button、Canvas 等,它们共同...

    flex 4基本控件学习实例,开发教程(3)

    FLEX 开发学习不可缺少的工具,下载后解压运行TourDeFlex.EXE 就可以看到FLEX3,FLEX4所有的控件基本用法,是FLEX学习开发最好最方便的工具.一共三个压缩包请注意下载完整

    flex通用分页控件

    在Flex中,分页控件是一种常见的用户界面元素,它允许用户在大量数据中分页浏览,提高用户体验并减轻服务器负载。创建一个通用的分页控件意味着它可以适应各种数据集和不同的应用场景,无需为每个新项目重复编写分页...

    (flex 4) 基本控件学习实例,开发教程(2)

    AdobeFlashBuilder 4(flex 4) 基本控件学习实例,开发教程 FLEX3 FLEX4 AdobeFlashBuilder4 开发教程 实例 FLEX 开发学习不可缺少的工具,下载后解压运行TourDeFlex.EXE 就可以看到FLEX3,FLEX4所有的控件基本用法,是...

    FLEX3学习实例 控件实例(1)

    FLEX 开发学习不可缺少的工具,下载后解压运行explorer.html就可以看到FLEX3,所有的控件基本用法,是FLEX学习开发最好最方便的工具.一共两个压缩包请注意下载完整

    flex 控件学习实例

    flex控件实例学习。想要学习flex的童鞋可以看一下。值得学习

    FLEX3学习实例 控件实例(2)

    FLEX3 开发学习不可缺少的工具,下载后解压运行explorer.html 就可以看到FLEX3所有的控件基本用法,是FLEX学习开发最好最方便的工具.一共两个压缩包请注意下载完整

    flex3.5时间控件(含时分秒)

    本篇文章将详细讲解如何在Flex 3.5中创建一个包含时、分、秒的时间选择器,以及如何进行实际应用。 `TimeChooser.mxml` 和 `Test.mxml` 这两个文件名暗示了我们有两个关键的组件:一个是`TimeChooser`,可能是...

    flex8表格控件

    flex8表格控件,可以方便的实现表格的数据处理,并且里面附带了全面的例子,解决很多程序员的表格问题

    flex 时间选择控件

    使用Flex时间选择控件时,开发者需要在主应用程序中导入并实例化`TimeChooser.mxml`组件,然后可以通过其公共属性设置初始值,通过事件监听器获取用户选择的时间。 总的来说,Flex时间选择控件是构建用户友好的时间...

    Flex控件折叠效果

    本文将深入探讨Flex控件折叠效果的相关知识点,包括其工作原理、实现方式以及实际应用。 Flex是一种用于创建富互联网应用程序(RIA)的开源框架,主要由Adobe Systems开发。在Flex中,我们可以利用各种组件如...

    flex 图片展示控件(放大镜效果)

    在本文中,我们将深入探讨如何在Flex环境中创建一个图片展示控件,该控件具有放大镜效果。Flex是一种基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA)。通过使用Flex,我们可以轻松地创建交互式、...

    flex8 网格控件

    Flex8网格控件是Adobe Flex框架中的一个关键组件,它在构建富互联网应用程序(RIA)时扮演着重要的角色。Flex是一种基于ActionScript和MXML的开放源代码开发平台,主要用于创建交互式、高性能的Web应用。Vb6,即...

    Flex 3 控件实例全部

    通过这样的实例,开发者可以更好地理解如何在 Flex 3 应用程序中集成和使用 `Alert` 控件,以增强用户体验并提供必要的反馈。Flex 3 提供了大量其他类型的控件,如按钮(`Button`)、文本输入(`TextInput`)、列表...

    Flex时间选择控件 精确到时分秒

    这通常涉及到创建实例,设置属性,以及将它添加到应用的显示列表中。 总的来说,Flex时间选择控件是Flex开发中不可或缺的一部分,尤其是在需要用户输入精确时间信息的场景。通过定制如`MyDateField`这样的组件,...

    flex3.2分页控件以及通过flexlib自定义Accordion

    在Flex 3.2中,可以创建一个简单的分页控件,包括“上一页”、“下一页”按钮和当前页数/总页数的显示。当用户点击这些按钮时,更新数据源以显示对应页的数据。此外,还可以添加跳转到指定页的功能,提高用户体验。 ...

    flex视频播放控件

    flex视频播放控件

    Flex-Java-Demo.rar_flex_flex 控件

    在"Flex-Java-Demo.rar_flex_flex 控件"这个压缩包中,我们很显然会发现一个关于Flex与Java互操作性的演示项目。下面将详细探讨相关的知识点。 1. **Flex**:Flex是由Adobe公司开发的一种开源框架,用于构建基于...

    flex DataTimePicker时间控件

    这篇博客文章(博文链接:https://songwensheng.iteye.com/blog/688246)可能详细介绍了如何在Flex项目中使用DataTimePicker控件,包括其功能、用法、自定义以及可能遇到的问题和解决方案。由于没有具体的描述,我将...

    flex时间控件

    在Flex时间控件中,用户可以方便地选择年、月、日以及小时、分钟和秒,以精确设定一个日期和时间值。这样的控件在许多应用场景中非常有用,比如在线预订系统、时间安排工具或者日历应用等。 要使用Flex时间控件,...

Global site tag (gtag.js) - Google Analytics