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

最新推荐文章于 2019-04-11 10:25:47 发布
最新推荐文章于 2019-04-11 10:25:47 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： Flex 文章标签： datagrid flex 存储 function object import

 http://fogiguiuu.iteye.com/blog/591106

 

重写了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. }  
package flex.components.checkdatagrid
{
	import mx.collections.ArrayCollection;
	import mx.controls.Alert;
	import mx.controls.DataGrid;
	
	public class MyDataGrid extends DataGrid
	{
		protected var arrColl:ArrayCollection = null;  //保存被选中的信息
		
		public function MyDataGrid()
		{
			super();
			arrColl = new ArrayCollection();
		}
		
                //方法名不该取这个的
		public function get listRendererArray():Array{  
			return listItems;
		}
		
		//add
		public function addToSelected(item:Object):void{
			
			if(arrColl.getItemIndex(item)<0)
			{
				arrColl.addItem(item);
			}
		}
		
		//del
		public function delFromSelected(item:Object):void{
			
			if(arrColl.getItemIndex(item)>-1)
			{
				arrColl.removeItemAt(arrColl.getItemIndex(item));
			}
		}
		
		//isIn
		public function isInSelected(item:Object):Boolean{
			
			if(arrColl.getItemIndex(item)<0)
			{
				return false;
			}
			else
			{
				return true;
			}
		}
		
		public function getSelected():ArrayCollection{
			return arrColl;
		}
	}
}
 

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. }  
package flex.components.checkdatagrid
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	import flash.text.TextField;
	
	import mx.controls.CheckBox;
	import mx.controls.DataGrid;
	import mx.events.DataGridEvent;

	public class CheckHeadBoxIR extends CheckBox
	{
		public function CheckHeadBoxIR(){
			super();
			this.addEventListener(Event.CHANGE, cgHandler);
		}
		
		override public function set data(value:Object) : void{
			//super.data = value;    //一定不要有这句
			this.selected = false;
			DataGrid(listData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler);
		}
		
		private function sortEventHandler(event:DataGridEvent):void{
			
			if(event.itemRenderer == this)
			{
				event.preventDefault();
			}
		}
		
		//居中显示
		override protected function updateDisplayList(w:Number, h:Number) : void{
			super.updateDisplayList(w, h);
			
			for(var i:Number=0; i<numChildren; i++)
			{
				var c:DisplayObject = getChildAt(i);
				if(!(c is TextField))
				{
					c.x = Math.round((w-c.width)/2);
					c.y = Math.round((h-c.height)/2);
				}
			}
		}
		
		protected function cgHandler(event:Event):void{
			
			//得到DataGrid里的listItems
			var listItems:Array =  MyDataGrid(listData.owner).listRendererArray;
			
			if(listItems.length>0)
			{
				for(var i:Number=0; i<listItems.length; i++)
				{
					if(listItems[i].length>0)
					{
						if(listItems[i][0].selected != this.selected)
						{
							listItems[i][0].selected = this.selected;
							listItems[i][0].dispatchEvent(new Event(Event.CHANGE));
						}
					}
				}
			}
			/*var ii:Object = dataGrid.indexToItemRenderer(2).data;*/
		}
	}
}
 

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. }  
package flex.components.checkdatagrid
{
	
	import flash.display.DisplayObject;
	import flash.events.Event;
	import flash.text.TextField;
	
	import mx.collections.ArrayCollection;
	import mx.controls.Alert;
	import mx.controls.CheckBox;
	
	public class CheckBoxIR extends CheckBox{
		
		public function CheckBoxIR(){
			super();
			this.addEventListener(Event.CHANGE, cgHandler);
		}
		
		override public function set data(value:Object) : void{
			super.data = value;

			
			if(MyDataGrid(listData.owner).isInSelected(data.id))
			{
				this.selected = true;
			}
			else
			{
				this.selected = false;
			}
			
		//	Alert.show("int set data--"+data.@id);
		}
		
		
		//居中显示
		override protected function updateDisplayList(w:Number, h:Number) : void{
			super.updateDisplayList(w, h);
			
			for(var i:Number=0; i<numChildren; i++)
			{
				var c:DisplayObject = getChildAt(i);
				if(!(c is TextField))
				{
					c.x = Math.round((w-c.width)/2);
					c.y = Math.round((h-c.height)/2);
				}
			}
		}
		
		protected function cgHandler(event:Event):void{
	
			var dg:MyDataGrid = MyDataGrid(listData.owner);
			
			if(this.selected == true)
			{
				dg.addToSelected(data.id);
			}
			else
			{
				dg.delFromSelected(data.id);
			}
		}

	}
}

 

应用

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>  
<checkdatagrid:MyDataGrid width="100%" borderStyle="outset" height="366" 
								   id="orderInfo" dataProvider="{data}" >
			<checkdatagrid:columns>
				<mx:DataGridColumn headerRenderer=flex.components.checkdatagrid.CheckHeadBoxIR" itemRenderer="flex.components.checkdatagrid.CheckBoxIR" width="30"/>
			</checkdatagrid:columns>
		</checkdatagrid:MyDataGrid>
 
飞龙剑
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex利用Datagrid来设置全选和单选
weixin_34090562的博客
12-19 99
1，效果预览图： 2，设置一个状态位，用于checkbox的选择的，从后台获取的对象集合ArrayCollection。假如其对象为Expert，有属性mainid，tname，major，depart！有两个方法设置状态位。 2.1 在后台给expert对象增加一个属性，譬如selected，类型为boolean，这样前台设置checkbox的列就可以用这个字段了 ...
在Flex中简单实现 dataGrid结合CheckBox使项目可选、全选、反选
renzhelife
11-08 138
对用户来讲，软件的功能性之外还要求其易用习惯性。非专业用户习惯了用鼠标点而不大适应键盘+鼠标。Flex的DataGrid虽然可以允许用户多选项目，但是这个多选需要结合Ctrl或Shift键来完成。而我们去网上浏览下歌曲网站在选择多首歌曲的过程就知道用户更喜欢那种方式了。 本文简单实现在DataGrid中结合CheckBox完成对项目的选择、全选和反选功能。但它并不十分适合组件化，应付一下特例...
flex DataGrid 标题上放 CheckBox 实现全选
Stoneson
05-15 1852
利用headerRenderer加入checkbox然后这个checkbox调用外部方法实现全选. 附送代码片段,如有不懂可以追问. //调用的外部方法 public function selectAll(obj:Object):void { ISsel=!ISsel; if (dataArray.length >
怎么实现flex中dategrid中全选、选中功能
catherine0_0的专栏
01-16 1253
如何实现flex中dategrid中全选、选中功能 我有一个这样的功能需要实现：左边一个datagrid，用来显示用户组，点击datagrid每一个item（每一行用户组数据）时候，显示另一个datagrid（显示用户组权限），如果已经数据库用户组已经分配权限值的时候，右边的datagrid权限处于选中状态，如果没有分配权限，就不选中，还有做一个全选功能，如果用jsp就比较好实现，但是在flex
flex datagrid 嵌checkbox实现全选与数据存储（非绑定数据源）(2)
cacaxiyun的专栏
02-19 124
  回来还是把以前弄得粘在这吧，感觉自己写的这些都不能正式用，只是自己写写。     以前写的http://fogiguiuu.iteye.com/blog/591106，这里稍改下，以前那个用的话比较麻烦。   有两个类DgAssist.as是用来存储已选择的需要存储的数据，还有DgCheckBox2.as。   package { import flash.events.Ev...
Flex中DataGrid内嵌CheckBox的全选反选和防止选择状态错乱实现方法
大志的工作学习笔记
04-18 177
Flex中DataGrid内嵌CheckBox的全选反选和防止选择状态错乱实现方法   从网上搜索相关的资料绝大多数全选和反选实现方式是通过继承DataGrid和CheckBox来在子类里面实现一些方法来实现,而这些方法大多数都是对事件进行监听来实现全选反选.这种方式很好,但是个人认为很麻烦,而且如果是一个已经成型的系统要加全选反选功能的话,会变得挺复杂和麻烦. 再就是DataGrid中内...
WPF-DataGrid中CheckBox实现全选与非全选
02-26
在实际应用中，我们经常需要在DataGrid中添加CheckBox，以便用户可以进行批量选择或者实现全选与非全选的功能。本文将详细讲解如何在WPF的DataGrid中实现这个功能。 首先，我们需要在XAML布局文件中为DataGrid添加...
flex datagrid 嵌套checkbox实现全选
07-20
本示例关注的是在DataGrid中嵌套复选框（Checkbox），并实现全选功能。这在需要用户批量选择或操作数据的场景中非常常见。以下是对这个主题的详细讲解： 1. **Flex DataGrid组件**： Flex DataGrid是Adobe Flex...
DataGrid绑定控件示例
04-01
功能提示: DataGrid绑定控件示例
flex在DataGrid中实现checkbox全选或取消
03-17
本文将深入探讨如何在Flex中的DataGrid组件中实现复选框的全选与取消全选功能，这对于数据操作和用户交互至关重要。 在Flex的DataGrid组件中，我们通常会遇到这样的需求：当用户需要对多条记录进行批量操作时，如...
flex中datagrid checkbox全选及单选源码
黄金屋颜如玉
12-31 3040
flex中datagrid checkbox全选及单选源码 import mx.controls.Alert; import mx.collections.ArrayCollection;  public var data1:ArrayCollection = new ArrayCollection([{id:1,city:'重庆',person:5000},{i
.net下实现DataGridView手动绑定数据
漫步技术小栈的博客
04-11 782
Dim dataAdapter As New SqlDataAdapter Dim dst As New DataSet Dim dt As New DataTable Dim i As Integer Dim iQty As Double Dim iMoney As Double Dim sqle...
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
Flex DataGrid组件：数据绑定与强大功能详解
DataGrid组件适用于展示包含多个属性的对象，支持数据绑定，无论是来自内部程序定义还是外部数据源，如文件或数据库。它的核心特性包括排序功能、单元格内嵌组件以及丰富的属性、方法和事件。例如，常用的属性有列宽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值