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

在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感觉还行 附上代码,同时希望大家举一反三 能实现添加其他组件到DataGrid列中

贴出自己改造过的:

CheckBoxHeaderRenderer.as

package 
{
	
	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;

	public class CheckBoxHeaderRenderer extends CheckBox
	{
		private var sele:String;
		public function CheckBoxHeaderRenderer()
		{
			super();
			this.addEventListener(Event.CHANGE, clickHandlers);
		}

		override public function set data(value:Object):void
		{
			DataGrid(listData.owner).addEventListener
                                    (DataGridEvent.HEADER_RELEASE,sortEventHandler);
			this.selected=this.sele=="true"?true:false;
		}
	
		private function sortEventHandler(event:DataGridEvent):void
		{
			if (event.itemRenderer == this)
				event.preventDefault();
		}
		
		protected function clickHandlers(event:Event):void
		{
			sele=(event.currentTarget.selected).toString();
			var a:ArrayCollection=DataGrid(listData.owner).dataProvider as ArrayCollection;
			for(var i:int=0;i<a.length;i++){

				(DataGrid(listData.owner).dataProvider as ArrayCollection)
                                   .getItemAt(i).selected=(event.currentTarget.selected).toString();
			}
			(DataGrid(listData.owner).dataProvider as ArrayCollection).refresh();
		}
	
	}
}  

CheckBoxItemDataRenderer.as
package 
{
	import flash.events.Event;	
	import mx.collections.ArrayCollection;
	import mx.controls.CheckBox;
	import mx.controls.DataGrid;

	public class CheckBoxItemDataRenderer extends CheckBox
	{
		private var currentData:Object; //保存当前一行值的对象
		public function CheckBoxItemDataRenderer()
		{
			super();		
			this.addEventListener(Event.CHANGE, changeHandler);
		}
		override public function set data(value:Object):void
		{
			this.currentData= value;
			this.selected = value.selected == "true"?true:false;
		}
		
		protected function changeHandler(event : Event) : void
		{
			currentData.selected = this.selected.toString();
		}
		/*override public function get data():Object{
			return currentData;
		}*/
	}
}
DataGrid_Checkbox.mxml
<?xml version="1.0" encoding="utf-8"?>
<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"
			   xmlns:dataGrid="*"
			   minWidth="955" minHeight="600" creationComplete="getaa()">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			[Bindable]
			private var data_myDataGrid:ArrayCollection=new ArrayCollection();
			
			private function headerClickHandler(event : Event) : void
			{
			/* 	
				for each(var obj: Object in data_myDataGrid)
				{
					obj.selected = String(event.currentTarget.selected);
				}
				data_myDataGrid.refresh(); */
			}
			private function getaa():void{
				var obj:Object=new Object();
				obj.labe="1";
				obj.data="a";
				obj.selected="false";
				var obj2:Object=new Object();
				obj2.labe="2";
				obj2.data="b";
				obj2.selected="false";
				var obj3:Object=new Object();
				obj3.labe="3";
				obj3.data="c";
				obj3.selected="false";
				var obj4:Object=new Object();
				obj4.labe="4";
				obj4.data="a";
				obj4.selected="false";
				var obj5:Object=new Object();
				obj5.labe="5";
				obj5.data="b";
				obj5.selected="false";
				var obj6:Object=new Object();
				obj6.labe="6";
				obj6.data="c";
				obj6.selected="false";
				var obj7:Object=new Object();
				obj7.labe="7";
				obj7.data="a";
				obj7.selected="false";
				var obj8:Object=new Object();
				obj8.labe="8";
				obj8.data="b";
				obj8.selected="false";
				var obj9:Object=new Object();
				obj9.labe="9";
				obj9.data="c";
				obj9.selected="false";
				data_myDataGrid.addItem(obj);
				data_myDataGrid.addItem(obj3);
				data_myDataGrid.addItem(obj2);
				data_myDataGrid.addItem(obj4);
				data_myDataGrid.addItem(obj5);
				data_myDataGrid.addItem(obj6);
				data_myDataGrid.addItem(obj7);
				data_myDataGrid.addItem(obj8);
				data_myDataGrid.addItem(obj9);
			}

			protected function button1_clickHandler(event:MouseEvent):void
			{
				for(var i:int=0;i<data_myDataGrid.length;i++){
					if(data_myDataGrid.getItemAt(i).selected=='true'){
						Alert.show(data_myDataGrid.getItemAt(i).labe);
					}
				}
			}

		]]>
	</fx:Script>
	
	<mx:DataGrid dataProvider="{data_myDataGrid}" x="10" y="10">
		<mx:columns>
			<mx:DataGridColumn dataField="labe" headerText="Label" />
			<mx:DataGridColumn dataField="data" headerText="Data" />
			<mx:DataGridColumn
				dataField="selected" headerText="Select" 
				itemRenderer="CheckBoxItemDataRenderer" 
				headerRenderer="CheckBoxHeaderRenderer"  />
		</mx:columns>
	</mx:DataGrid>
	 <mx:Button click="button1_clickHandler(event)"/>
</s:Application>






你可能感兴趣的:(datagrid,object,function,Flex,application,button)