带有复选框的数据网格DataGrid

首先说一下用处吧，在数据网格（DataGrid或者AdvancedDataGrid）每一行有了复选框之后我们便可以用来进行批量删除工作了。

1. 创建每一行中的复选框渲染器CheckBoxItemRenderer

//文件CheckBoxItemRenderer.as代码如下

package org.xjh.components{
	
	import flash.events.Event;    
	import mx.collections.ArrayCollection;  
	import mx.controls.CheckBox;  
	import mx.controls.DataGrid;  
	
	/**
	 * 功能：每一行中的复选框渲染器
	 * 创建时间：2014-9-23 下午05:10:36
	 * 修改时间：
	 * 作者：xujianhua
	 */
	public class CheckBoxItemRenderer extends CheckBox  
	{  
		private var rowDataObj:Object; //保存一行值的对象  
		
		public function CheckBoxItemRenderer(){  
			//为本复选框加入状态改变事件处理器
			this.addEventListener(Event.CHANGE, changeHandler);  
		}  
		
		//这个方法将由flex自动调用，value将传入的是封装一行数据的对象(一般是ArrayCollection中的一个对象)
		override public function set data(value:Object):void  
		{  
			this.rowDataObj = value;  //记住一行的对象
			this.selected = (value.selected == "true") ? true:false;//修改当前this复选框的选择状态  
		}  
		
		private function changeHandler(event:Event):void  
		{  
			//每当行中的复选框选择状态改变时，也将修改行对象的selected属性，注意这个selected是一个动态属性
			rowDataObj.selected = this.selected.toString();  
		}  
	}  
}

2. 复选框列的顶部复选框渲染器（headerRenderer）CheckBoxHeaderRenderer

//文件CheckBoxHeaderRenderer.as代码

package org.xjh.components{
	
	import flash.events.Event;  
	import flash.events.MouseEvent;  
	
	import mx.collections.ArrayCollection;  
	import mx.controls.Alert;  
	import mx.controls.CheckBox;  
	import mx.controls.DataGrid;  
	import mx.events.DataGridEvent;  
	
	/**
	 * 功能：复选框列的顶部复选框渲染器（headerRenderer）
	 * 创建时间：2014-9-23 下午05:13:22
	 * 修改时间：
	 * 作者：xujianhua
	 */
	public class CheckBoxHeaderRenderer extends CheckBox{  
		
		public function CheckBoxHeaderRenderer(){  
			//为本复选框加入状态改变事件处理器
			this.addEventListener(Event.CHANGE, clickHandlers);  
		}  
		
		override public function set data(value:Object):void  
		{   //指示用户在列标题上按下和释放鼠标。
			DataGrid(listData.owner).addEventListener(
				DataGridEvent.HEADER_RELEASE, sortEventHandler);  
		}  
		
		private function sortEventHandler(event:DataGridEvent):void  
		{  
			if (event.itemRenderer == this)  
				event.preventDefault();  	//阻止在这一列上的排序操作
		}  
		
		//点击顶部复选框，则将相应的选中状态反映到每一行的复选框中
		private function clickHandlers(event:Event):void  
		{  
			//得到每一行的集合
			var arrColl:ArrayCollection = DataGrid(listData.owner).dataProvider as ArrayCollection;  
			for(var i:int = 0; i < arrColl.length; i++){ // 将相应的选中状态反映到每一行的复选框中
				//注意这个selected是一个动态属性
				arrColl.getItemAt(i).selected = (event.currentTarget.selected).toString();  
			}  
			//刷新每一行的视图状态（复选框的选中状态）
			arrColl.refresh();  
		}  
		
	}  
}

3.创建带有复选框的数据网格（可以用来进行批量删除工作）应用测试程序HaveCheckBoxDataGrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--
功能：带有复选框的数据网格（可以用来进行批量删除工作）
创建时间：2014-9-23 下午05:15:43
修改时间：
作者：xujianhua
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600" >  
	<fx:Script>  
		<![CDATA[ 
			import mx.collections.ArrayCollection; 
			import mx.controls.Alert; 
			
			[Bindable] 
			private var employeeList:ArrayCollection = new ArrayCollection(
				[
					{id:"E201400001", name:"张三1", birthday:"1991-6-5"},
					{id:"E201400002", name:"张三2", birthday:"1992-6-5"},
					{id:"E201400003", name:"张三3", birthday:"1993-6-5"},
					{id:"E201400004", name:"张三4", birthday:"1994-6-5"},
					{id:"E201400005", name:"张三5", birthday:"1995-6-5"},
					{id:"E201400006", name:"李四1", birthday:"1989-5-6"},
					{id:"E201400007", name:"李四2", birthday:"1989-5-6"},
					{id:"E201400008", name:"李四3", birthday:"1989-5-6"},
					{id:"E201400009", name:"李四4", birthday:"1988-5-4"},
					{id:"E201400010", name:"李四5", birthday:"1987-4-2"},
					{id:"E201400011", name:"王五1", birthday:"1985-3-1"}
				]
			); 
			
			private function getAllSelectedBT_clickHandler(event:MouseEvent):void 
			{ 
				for(var i:int = 0; i < employeeList.length; i++){ 
					//注意这个selected是一个动态属性
					if(employeeList.getItemAt(i).selected == 'true'){ 
						//这里您可以获取每一选中行的任何属性列的值，作为测试这里用name属性
						Alert.show(employeeList.getItemAt(i).name, "您所选中的行的name值为"); 
					} 
				} 
			} 
			
		]]>  
	</fx:Script>  
	<s:VGroup x="10" y="10">
		<mx:DataGrid dataProvider="{employeeList}" x="10" y="10">  
			<mx:columns>  
				<mx:DataGridColumn 
					itemRenderer="org.xjh.components.CheckBoxItemRenderer"   
					headerRenderer="org.xjh.components.CheckBoxHeaderRenderer"  />  
				<mx:DataGridColumn dataField="id" headerText="员工编号" />  
				<mx:DataGridColumn dataField="name" headerText="员工姓名" />  
				<mx:DataGridColumn dataField="birthday" headerText="员工生日" />  
			</mx:columns>  
		</mx:DataGrid>  
		<mx:Button label="获取选中的" id="getAllSelectedBT" click="getAllSelectedBT_clickHandler(event)"/> 
	</s:VGroup>
</s:Application>  

4. 测试

4.1 未选中状态

4.2 选中一条并获取

4.3 选中两条并获取

4.4 选中全部并获取（由于弹出太多框导致数据网格内容被完全遮罩）

依次点击弹出框的确定按钮后便逐渐显示数据网格中的内容了