正在加载菜单，请稍待......

给DataGrid添加一个静态分页组件

类别：flex实例

标签：

浏览：172次

明河共影发布于 2009年11月30日

RIA之家技术群：24440797。你可以通过以下方式联络到明河： 1、进入我的微博首页跟随我 2、我的email：riahome@126.com

之前已经发了好几篇演示flex的DataGrid强大特性的文章，今天发篇教程，给DataGrid添加个静态分页组件。网上关于给DataGrid添加动态分页的教程好多。这里的静态分页是指数据已经全部派发完毕，客服端进行的分页。
这个类是我自己写的，难免会有bug，也有不完善的地方，先放出，以后慢慢改善。

先来看演示：


源代码下载：

说明下文档结构：

libs：分页类所在文件夹

images：分页组件所用到的按钮图片

DataGrid7.mxml：主程序入口

主程序代码说明：

（沿用之前所用的DataGrid示例，重复部分不再贴出，详见源代码）

  1. internal function completeHandler(evt:ResultEvent):void{
  2.                 sourceArrCollection = evt.result.rss.channel.item;
  3.                 GridPage = new Page(sourceArrCollection,currentPage,perPage);
  4.                 GridPage.pageBar.width = 526;
  5.                 GridPage.pageBar.height = 32;
  6.                 grid_vessel.addChild(GridPage.pageBar);
  7.                
  8.             }

这是数据加载后执行的回调函数。
GridPage = new Page(sourceArrCollection,currentPage,perPage);实例化分页组件。
接受三个参数：

  • sourceArrCollection : 数据源（为ArrayCollection实例）
  • currentPage：所要显示的当前页，默认为1
  • perPage：每页的记录数，默认为10

grid_vessel.addChild(GridPage.pageBar);
pageBar这个属性值是GridPage生成的分页容器，为HBox实例。

分页类代码：

  1. package libs
  2. {
  3.     import flash.events.MouseEvent;
  4.    
  5.     import mx.collections.ArrayCollection;
  6.     import mx.containers.HBox;
  7.     import mx.controls.Image;
  8.     import mx.controls.LinkButton;
  9.     import mx.controls.NumericStepper;
  10.     import mx.controls.Text;
  11.    
  12.     public class Page
  13.     {
  14.         //数据源
  15.         [Bindable] public var sourceArrCollection:ArrayCollection;
  16.         //每页条目数
  17.         [Bindable] public var perPage:uint;
  18.         //当前页码
  19.         [Bindable] public var currentPage:uint;
  20.         //总页数
  21.         [Bindable] public var totalPages:uint;
  22.         //总记录数
  23.         [Bindable] public var totalItems:uint;
  24.         //当前页的数据储存器
  25.         [Bindable] public var currentPageCollection:ArrayCollection;
  26.         [Bindable] public var icons:ArrayCollection;
  27.         public var pageBar:HBox;
  28.         public var btns:Object = {};
  29.         public var text:Text;
  30.                
  31.         private var _dataCollection:ArrayCollection;
  32.         private var _start:uint = 0;
  33.         private var _end:uint = 0;
  34.         private var _btnIcons:Array = ['images/first.gif','images/prev.gif','images/next.gif','images/last.gif'];       
  35.         private var _btnDisableIcons:Array = ['images/first_disabled.gif','images/prev_disabled.gif','images/next_disabled.gif','images/last_disabled.gif'];   
  36.        
  37.         public function Page(sourceArrCollection:ArrayCollection = null,currentPage:uint = 1,perPage:uint = 10):void
  38.         {
  39.             this.sourceArrCollection = sourceArrCollection;
  40.             this.currentPage = currentPage;
  41.             this.perPage = perPage;
  42.             this.totalItems = this.sourceArrCollection.length;
  43.             this.totalPages = Math.ceil(this.totalItems / this.perPage);
  44.             icons = new ArrayCollection(this._btnIcons);
  45.             this._create();
  46.             this.getData(currentPage);
  47.             this.btns.next.addEventListener(MouseEvent.CLICK,nextHandler);
  48.             this.btns.prev.addEventListener(MouseEvent.CLICK,prevHandler);
  49.             this.btns.first.addEventListener(MouseEvent.CLICK,firstHandler);
  50.             this.btns.last.addEventListener(MouseEvent.CLICK,lastHandler);
  51.             this.btns.jump.addEventListener(MouseEvent.CLICK,jumpHandler);
  52.             var _that:* = this;
  53.             function nextHandler():void{
  54.                 if(_that.btns.next.source != _that._btnDisableIcons[2]) _that.next();
  55.             }
  56.             function prevHandler():void{
  57.                 if(_that.btns.prev.source != _that._btnDisableIcons[1]) _that.prev();
  58.             }
  59.             function firstHandler():void{
  60.                 if(_that.btns.first.source != _that._btnDisableIcons[0]) _that.goToFirst();
  61.             }
  62.             function lastHandler():void{
  63.                 if(_that.btns.last.source != _that._btnDisableIcons[3]) _that.goToLast();
  64.             }
  65.             function jumpHandler():void{
  66.                 var _num:uint = _that.btns.PageNum.value;
  67.                 _that.getData(_num);
  68.             }                                                
  69.         }
  70.         /**
  71.          * 获取指定页的数据储存器
  72.          * @param pageNum {uint} 指定页
  73.          * @return {ArrayCollection}
  74.          * 
  75.          */
  76.         public function getData(pageNum:uint):ArrayCollection{
  77.             if(this.sourceArrCollection != null && this.totalItems > 0){
  78.                     this.currentPageCollection = new ArrayCollection();
  79.                     this._end = pageNum * this.perPage;
  80.                     this._start = this._end - this.perPage;
  81.                     if(pageNum == this.totalPages) this._end = this.totalItems;
  82.                     this.currentPage = pageNum;
  83.                     this._setBtnEnabled();
  84.                     this.text.text = "第"+this.currentPage+"页/共"+this.totalPages+"页"+this.totalItems+"条记录";
  85.                     for(var i:int=this._start;i<this._end;i++){
  86.                         this.currentPageCollection.addItem(this.sourceArrCollection.getItemAt(i));
  87.                     }
  88.                     return this.currentPageCollection;               
  89.             }
  90.             return null;
  91.         }
  92.         /**
  93.          * 下一页
  94.          */
  95.         public function next():void{
  96.             if(this.currentPage < this.totalPages){
  97.                 this.currentPage ++;
  98.                 this.getData(this.currentPage);           
  99.             }
  100.                
  101.         }
  102.         /**
  103.          * 上一页
  104.          */       
  105.         public function prev():void{
  106.             if(this.currentPage >1){
  107.                 this.currentPage --;
  108.                 this.getData(this.currentPage);               
  109.             }       
  110.         }
  111.         /**
  112.          * 前往第一页
  113.          */       
  114.         public function goToFirst():void{
  115.             this.currentPage = 1;
  116.             this.getData(this.currentPage);
  117.         }
  118.         /**
  119.          * 前往最后一页
  120.          */       
  121.         public function goToLast():void{
  122.             this.currentPage = this.totalPages;
  123.             this.getData(this.currentPage);
  124.         }
  125.         /**
  126.          * 获取总页数
  127.          */       
  128.         public function getTotalPages():int{
  129.             return this.totalPages;
  130.         }
  131.         /**
  132.          * 获取记录总数
  133.          */       
  134.         public function getTotalItems():int{
  135.             return this.totalItems;
  136.         }
  137.         /**
  138.          * 设置分页工具条的enabled
  139.          */       
  140.         private function _setBtnEnabled():void{
  141.             if(this.currentPage == 1){
  142.                 this.btns.first.source = this._btnDisableIcons[0];
  143.                 this.btns.prev.source = this._btnDisableIcons[1];
  144.             }
  145.             else if(this.currentPage == this.totalPages){
  146.                 this.btns.next.source = this._btnDisableIcons[2];
  147.                 this.btns.last.source = this._btnDisableIcons[3];
  148.             }
  149.             else{
  150.                 this.btns.first.source = this._btnIcons[0];
  151.                 this.btns.prev.source = this._btnIcons[1];
  152.                 this.btns.next.source = this._btnIcons[2];
  153.                 this.btns.last.source = this._btnIcons[3];               
  154.             }
  155.            
  156.         }
  157.         /**
  158.          * 创建分页工具条
  159.          */       
  160.         private function _create():void{
  161.             this.pageBar = new HBox();
  162.             this.pageBar.styleName = "pageBar";
  163.             this. _createBtns();
  164.             this.pageBar.addChild(this.btns.PageNum);
  165.             this.pageBar.addChild(this.btns.jump);           
  166.             this.pageBar.addChild(this.btns.first);
  167.             this.pageBar.addChild(this.btns.prev);
  168.             this.pageBar.addChild(this.btns.next);
  169.             this.pageBar.addChild(this.btns.last);
  170.             this.text = new Text();
  171.             this.pageBar.addChild(this.text);
  172.         }
  173.         private function _createBtn(source:String):Image{
  174.             var btn:Image = new Image();
  175.             btn.source = source;
  176.             btn.width = 16;
  177.             btn.height = 16;
  178.             btn.styleName = "pageBarBtn";
  179.            
  180.             btn.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
  181.             function mouseOverHandler(evt:MouseEvent):void{
  182.                 //btn.setStyle("borderStyle","solid");
  183.                
  184.             }
  185.             return btn;
  186.         }
  187.         private function _createBtns():void{
  188.             this.btns.first = this._createBtn(this._btnIcons[0]);
  189.             this.btns.prev = this._createBtn(this._btnIcons[1]);
  190.             this.btns.next = this._createBtn(this._btnIcons[2]);
  191.             this.btns.last = this._createBtn(this._btnIcons[3]);
  192.             var _NumericStepper:NumericStepper = new NumericStepper();
  193.             _NumericStepper.stepSize = 1;
  194.             _NumericStepper.minimum = 1;
  195.             _NumericStepper.maximum = this.totalPages;
  196.             this.btns.PageNum = _NumericStepper;
  197.             var _jump:LinkButton = new LinkButton();
  198.             _jump.label = "跳转";
  199.             this.btns.jump = _jump;
  200.            
  201.            
  202.         }
  203.        
  204.  
  205.     }
  206. }

订阅RIA之家，及时获取RIA之家最新文章：

本文链接：http://www.36ria.com/872

除非特别说明，本站的所有内容均为原创或翻译，所有权属于文章作者，欢迎转载，转载请注明出处，谢谢。

  • 相关文章
  • 最新文章
  • 最热文章
  • 随机文章