Flex 开发学习笔记3 - Flex Component 组件开发-分页列表

 

以下是我开发的Flex列表，该列表的分页参照了Kelvin的教程。以下是该列表的样式：

 

 

从这个列表的开发过程中感觉到了 Flex Component 的强大与方便！比如在这个列表中，分页列表作成了 Flex Component 组件，并自定义了双击事件(也可以增加自定义属性)，可以被应用到不同的列表中，达到了组件共用的目的。以下是该分页条的代码：

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:local="*">

    <!-- 这里定义的是列表上的双击事件 -->
    <mx:Metadata>
        [Event(name="dataGridDoubleClick", type="flash.events.Event")]
    </mx:Metadata>
    
    <mx:Script>

       <![CDATA[

           /*<SPAN class=hilite2>分页</SPAN>DataGrid

            by Kelvin 2008-02-24

            MSN:[e-mail]

            Email:[e-mail]

            
            因为是一次取出全部数据，所以适合数据量不会太大的情况。

            加了一个pageSize,用来控制每页显示的行数，可以在调用这个组件的时候为pageSize属性赋值，

            默认为每页显示10行数据,不需要为DataGrid指定高度。

            参考 古刹飞鹰@E鹰创作室 的文章

            */

           import mx.collections.ArrayCollection;

           

           [Bindable]public var pageSize:int=10;//每页显示行数

           [Bindable]private var totalPage:int=0;//总页数

           [Bindable]private var currentPage:int=0;//当前页

           

           [Bindable]
           public var acAllData:ArrayCollection;//所有数据

           [Bindable]
           private var acPageData:ArrayCollection=new ArrayCollection();//当前页数据

           [Bindable]
           public var arrColumns:Array;//DataGrid列,在调用时需要为这个数组设置数据


           //初始化

           public function init(value:ArrayCollection):void

           {

              acAllData=value;

              if(acAllData.length!=0 && acAllData!=null)

              {

                  totalPage=Math.ceil(acAllData.length/pageSize);

                  loadData(0);

              }else{

                  currentPage=0;

                  totalPage=0;

              }

           }

           

           //加载数据

           private function loadData(pageNum:int):void

           {

              if(pageNum>=0 && pageNum<totalPage)

              {

                  acPageData.removeAll();

                  currentPage=pageNum;//重新为当前页的变量赋值

                  var startIndex:int=pageNum*pageSize;//计算起始索引

                  for(var i:int=0;i<pageSize && startIndex<acAllData.length;i++)

                  {

                     acPageData.addItem(acAllData[startIndex]);

                     startIndex++;

                  }

              }

           }
           
           //双击事件
           private function dbClickEvent():void{
           		
           		dispatchEvent(new Event("dataGridDoubleClick"));
           		
           }

       ]]>

    </mx:Script>

    <mx:VBox x="0" y="0" width="100%" height="100%" verticalGap="0" horizontalAlign="center" backgroundColor="white">

       <mx:DataGrid id="dataGrid" width="98%" doubleClick="dbClickEvent()" doubleClickEnabled="true" dataProvider="{acPageData}" columns="{arrColumns}" rowCount="{pageSize}"/>

       <mx:HBox cornerRadius="0" borderStyle="solid" horizontalAlign="left" verticalAlign="middle" width="98%">

           <mx:Text text="{'  第'+(totalPage>0?(currentPage+1):0)+'页/共'+totalPage+'页'+'  共'+(acAllData!=null?acAllData.length:0)+'条记录'}" fontSize="12"/>

           <mx:LinkButton id="lbtnFirst" label="首页" click="loadData(0)" enabled="{lbtnPrevious.enabled}" fontSize="12"/>

           <mx:LinkButton id="lbtnPrevious" label="上一页" click="loadData(currentPage-1)" enabled="{currentPage!=0?true:false}" fontSize="12"/>

           <mx:LinkButton id="lbtnNext" label="下一页" click="loadData(currentPage+1)" enabled="{totalPage>(currentPage+1)?true:false}" fontSize="12"/>

           <mx:LinkButton id="lbtnLast" label="尾页" click="loadData(totalPage-1)" enabled="{lbtnNext.enabled}" fontSize="12"/>

            <mx:NumericStepper id="nsPageNum" stepSize="1" minimum="1" maximum="{totalPage}" enabled="{lbtnJump.enabled}" cornerRadius="0"/>

            <mx:LinkButton id="lbtnJump" label="跳转" click="loadData(nsPageNum.value-1)" enabled="{totalPage>1?true:false}" fontSize="12"/>

       </mx:HBox>

    </mx:VBox>

</mx:Canvas>

 

评论

9 楼 wuxi15932077655 2009-02-13  

界面做的很好看啊！ 哥们

8 楼 666666 2009-01-15  

有够垃圾，就这种东西还刚出来显，真是垃圾

7 楼 vissul 2008-09-16  

您好 ，我想问一下您如何去掉 flex component 的底字，就是阴影字 flex data visuallization trial

6 楼 yexin218 2008-06-13  

谢谢-我想将你的这篇文章转载到http://yexin218.cublog.cn中。
我会注明来源以及作者的.

5 楼 yexin218 2008-06-13  

哦 知道了。。。谢谢 不错

4 楼 jacally 2008-06-13  

jacally 27 分钟前 删除
作了个Demo,有源码，你可以下载看看。。。。[url]http://lib.iteye.com/blog/202883 [/url]
我怀疑可能与分页列表组件的命名空间引用有关。

3 楼 yexin218 2008-06-13  

能帮我看看那个kelvin教程的我说的那个问题吗？
就是dg.init(ac)说init未定义方法。是不是那两个文件放在同个文件下就可以了？
谢谢

2 楼 jacally 2008-06-13  

正在抓紧时间写后续的文章。

1 楼 yexin218 2008-06-13  

能不能写一个完整的运行程序啊....谢谢学习中因为那个kelvin教程总是提示说    dg.init(ac);无法使用。谢谢