flex datagrid 嵌checkbox实现全选与数据存储(非绑定数据源)

转载 2011年11月14日 11:30:50
 

重写了DataGrid,主要是为了得到DataGrid的listItems属性,listItems保存了当前现显示的每一行的信息,还用了个ArrayCollection保存被选中了行的信息。

MyDataGrid.as

Java代码 复制代码 收藏代码
  1. package flex.components.checkdatagrid   
  2. {   
  3.     import mx.collections.ArrayCollection;   
  4.     import mx.controls.Alert;   
  5.     import mx.controls.DataGrid;   
  6.        
  7.     public class MyDataGrid extends DataGrid   
  8.     {   
  9.         protected var arrColl:ArrayCollection = null;  //保存被选中的信息   
  10.            
  11.         public function MyDataGrid()   
  12.         {   
  13.             super();   
  14.             arrColl = new ArrayCollection();   
  15.         }   
  16.            
  17.                 //方法名不该取这个的   
  18.         public function get listRendererArray():Array{     
  19.             return listItems;   
  20.         }   
  21.            
  22.         //add   
  23.         public function addToSelected(item:Object):void{   
  24.                
  25.             if(arrColl.getItemIndex(item)<0)   
  26.             {   
  27.                 arrColl.addItem(item);   
  28.             }   
  29.         }   
  30.            
  31.         //del   
  32.         public function delFromSelected(item:Object):void{   
  33.                
  34.             if(arrColl.getItemIndex(item)>-1)   
  35.             {   
  36.                 arrColl.removeItemAt(arrColl.getItemIndex(item));   
  37.             }   
  38.         }   
  39.            
  40.         //isIn   
  41.         public function isInSelected(item:Object):Boolean{   
  42.                
  43.             if(arrColl.getItemIndex(item)<0)   
  44.             {   
  45.                 return false;   
  46.             }   
  47.             else  
  48.             {   
  49.                 return true;   
  50.             }   
  51.         }   
  52.            
  53.         public function getSelected():ArrayCollection{   
  54.             return arrColl;   
  55.         }   
  56.     }   
  57. }  
 

CheckHeadBoxIR.as  实现全选用的checkbox

Java代码 复制代码 收藏代码
  1. package flex.components.checkdatagrid   
  2. {   
  3.     import flash.display.DisplayObject;   
  4.     import flash.events.Event;   
  5.     import flash.text.TextField;   
  6.        
  7.     import mx.controls.CheckBox;   
  8.     import mx.controls.DataGrid;   
  9.     import mx.events.DataGridEvent;   
  10.   
  11.     public class CheckHeadBoxIR extends CheckBox   
  12.     {   
  13.         public function CheckHeadBoxIR(){   
  14.             super();   
  15.             this.addEventListener(Event.CHANGE, cgHandler);   
  16.         }   
  17.            
  18.         override public function set data(value:Object) : void{   
  19.             //super.data = value;    //一定不要有这句   
  20.             this.selected = false;   
  21.             DataGrid(listData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler);   
  22.         }   
  23.            
  24.         private function sortEventHandler(event:DataGridEvent):void{   
  25.                
  26.             if(event.itemRenderer == this)   
  27.             {   
  28.                 event.preventDefault();   
  29.             }   
  30.         }   
  31.            
  32.         //居中显示   
  33.         override protected function updateDisplayList(w:Number, h:Number) : void{   
  34.             super.updateDisplayList(w, h);   
  35.                
  36.             for(var i:Number=0; i<numChildren; i++)   
  37.             {   
  38.                 var c:DisplayObject = getChildAt(i);   
  39.                 if(!(c is TextField))   
  40.                 {   
  41.                     c.x = Math.round((w-c.width)/2);   
  42.                     c.y = Math.round((h-c.height)/2);   
  43.                 }   
  44.             }   
  45.         }   
  46.            
  47.         protected function cgHandler(event:Event):void{   
  48.                
  49.             //得到DataGrid里的listItems   
  50.             var listItems:Array =  MyDataGrid(listData.owner).listRendererArray;   
  51.                
  52.             if(listItems.length>0)   
  53.             {   
  54.                 for(var i:Number=0; i<listItems.length; i++)   
  55.                 {   
  56.                     if(listItems[i].length>0)   
  57.                     {   
  58.                         if(listItems[i][0].selected != this.selected)   
  59.                         {   
  60.                             listItems[i][0].selected = this.selected;   
  61.                             listItems[i][0].dispatchEvent(new Event(Event.CHANGE));   
  62.                         }   
  63.                     }   
  64.                 }   
  65.             }   
  66.             /*var ii:Object = dataGrid.indexToItemRenderer(2).data;*/  
  67.         }   
  68.     }   
  69. }  
 

CheckBoxIR.as

Java代码 复制代码 收藏代码
  1. package flex.components.checkdatagrid   
  2. {   
  3.        
  4.     import flash.display.DisplayObject;   
  5.     import flash.events.Event;   
  6.     import flash.text.TextField;   
  7.        
  8.     import mx.collections.ArrayCollection;   
  9.     import mx.controls.Alert;   
  10.     import mx.controls.CheckBox;   
  11.        
  12.     public class CheckBoxIR extends CheckBox{   
  13.            
  14.         public function CheckBoxIR(){   
  15.             super();   
  16.             this.addEventListener(Event.CHANGE, cgHandler);   
  17.         }   
  18.            
  19.         override public function set data(value:Object) : void{   
  20.             super.data = value;   
  21.   
  22.                
  23.             if(MyDataGrid(listData.owner).isInSelected(data.id))   
  24.             {   
  25.                 this.selected = true;   
  26.             }   
  27.             else  
  28.             {   
  29.                 this.selected = false;   
  30.             }   
  31.                
  32.         //  Alert.show("int set data--"+data.@id);   
  33.         }   
  34.            
  35.            
  36.         //居中显示   
  37.         override protected function updateDisplayList(w:Number, h:Number) : void{   
  38.             super.updateDisplayList(w, h);   
  39.                
  40.             for(var i:Number=0; i<numChildren; i++)   
  41.             {   
  42.                 var c:DisplayObject = getChildAt(i);   
  43.                 if(!(c is TextField))   
  44.                 {   
  45.                     c.x = Math.round((w-c.width)/2);   
  46.                     c.y = Math.round((h-c.height)/2);   
  47.                 }   
  48.             }   
  49.         }   
  50.            
  51.         protected function cgHandler(event:Event):void{   
  52.        
  53.             var dg:MyDataGrid = MyDataGrid(listData.owner);   
  54.                
  55.             if(this.selected == true)   
  56.             {   
  57.                 dg.addToSelected(data.id);   
  58.             }   
  59.             else  
  60.             {   
  61.                 dg.delFromSelected(data.id);   
  62.             }   
  63.         }   
  64.   
  65.     }   
  66. }  

 

应用

Java代码 复制代码 收藏代码
  1. <checkdatagrid:MyDataGrid width="100%" borderStyle="outset" height="366"    
  2.                                    id="orderInfo" dataProvider="{data}" >   
  3.             <checkdatagrid:columns>   
  4.                 <mx:DataGridColumn headerRenderer=flex.components.checkdatagrid.CheckHeadBoxIR" itemRenderer="flex.components.checkdatagrid.CheckBoxIR" width="30"/>   
  5.             </checkdatagrid:columns>   
  6.         </checkdatagrid:MyDataGrid>  
 

Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能 几种实现方法

 在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感...
  • u011589095
  • u011589095
  • 2014-08-14 14:53:13
  • 1231

flex中datagrid checkbox全选及单选源码

flex中datagrid checkbox全选及单选源码 import mx.controls.Alert; import mx.collections.ArrayCollection;...
  • ml5271169588
  • ml5271169588
  • 2013-12-31 15:18:48
  • 2345

Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能

在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感觉还行 ...
  • vipliyaohua
  • vipliyaohua
  • 2011-07-16 13:10:22
  • 8040

flex Datagrid checkbox全选

  • 2011年06月06日 21:59
  • 16KB
  • 下载

WPF使用MVVM完成DataGrid数据绑定带全选

先看看效果: 完全采用MVVM的各种绑定。点击表头CheckBox可实现全选和取消全选,选中数据行所有CheckBox时自动选中表头CheckBox,数据行中有未选中的则不会选中表头CheckB...
  • lwwl12
  • lwwl12
  • 2017-09-22 09:23:26
  • 229

flex在DataGrid中添加checkbox复选框,并获取选中的值

flex在DataGrid中添加checkbox复选框,并获取选中的值 1、界面:注册事件,并获取子窗体的值 //选择专题区域 private  var ztqy:DBPJZTQY = null; p...
  • ml5271169588
  • ml5271169588
  • 2013-09-15 15:42:55
  • 6286

WPF中DataGrid 添加checkbox实现全选、多选

在机房合作项目中,有一个窗体是这样子的               简单介绍一下:就是通过查询出正在上机的学生,可以通过勾选前面的checkbox,选中该行,然后可以进行部分下机和全部下机。如...
  • kwy15732621629
  • kwy15732621629
  • 2016-07-26 14:41:48
  • 8351

WPF DataGrid表头Checkbox 全选与全反选

WPF 在使用DataGrid展示数据的时候经常会使用到checkbox列,特别是id列     例如下面这种效果:          WPF 要实现DataGrid checkbox全选与全反选,方...
  • aojiancc2
  • aojiancc2
  • 2017-02-09 16:12:08
  • 3519

在DataGrid中利用CheckBox全选所有行

                                                    在DataGrid中利用CheckBox全选所有行 效果图:背景:asp.net中的DataGr...
  • soarheaven
  • soarheaven
  • 2006-09-20 23:05:00
  • 2761

wpf中使用mvvm,解决checkbox全选问题

开始原因是由于并不知道使用数据模板,需要加入数据源,要找到数据源的作用域。后面的命令部分代码如下: public ICommand SelectOrUnSelectAll { get { r...
  • yulongguiziyao
  • yulongguiziyao
  • 2015-06-11 20:09:56
  • 711
收藏助手
不良信息举报
您举报文章:flex datagrid 嵌checkbox实现全选与数据存储(非绑定数据源)
举报原因:
原因补充:

(最多只允许输入30个字)