Flex控件--AdvancedDataGrid实现列头过滤功能（顺便写了Button列

源于自己正在做的一个项目，Flex，自己写的代码。因为接触Flex没多久，见笑了。。。。。
??? 代码有个小问题，其实主要是我懒得继续改了-.-过滤文本输入框输入之后会失去焦点，我就偷懒地做了个重新定位，但是重新定位会全选文本，然后我又偷懒地直接把光标定位到文本最后，，，理应继承扩张button类的，，但是偷懒，当然效果肯定没那么好啦，，，望大神指教，，，

?

先上效果图：

?

扩展了一点点东西，例如排序，鼠标移过去会变成黑色，移走会变成灰色，升降序也有箭头表示，红色字体是过滤字体。。。。

?

使用方法挺简单的，直接用标签就可以了，也添加tooltip的功能。。

使用例子：

<fx:Script>
	<![CDATA[
		import MyAdvancedDataGrid.ADGCheckBoxColumn;
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import mx.managers.PopUpManager;
			
		[Bindable]
	        public var dataArray:ArrayCollection = new ArrayCollection;
			
		[Bindable]
		public var dataArr:ArrayCollection = new ArrayCollection;
			
		private function Init():void{  
			dataArray.addItem({isSelected:false,name:'Christina Coenraets',phone:'555-219-2270',email:'ccoenraets@fictitious.com',text:"1a",textid:1});  
			dataArray.addItem({isSelected:false,name:'Joanne Wall',phone:'555-219-2012',email:'jwall@fictitious.com',text:"2b",textid:2});  
			dataArray.addItem({isSelected:true,name:'Maurice Smith',email:'maurice@fictitious.com',name:'Mary Jones',phone:'555-219-2000',email:'mjones@fictitious.com',text:"3c",textid:3});  
			dataArray.addItem({isSelected:false,name:'God Win',phone:'555-219-2005',email:'godwin@fictitious.com',textid:1}); 
			//mydg.dataProvider = dataArray;
			dataArr.addItem({text:"1a",textid:1});
			dataArr.addItem({text:"2b",textid:2});
			dataArr.addItem({text:"3c",textid:3});
			dataArr.addItem({text:"4d",textid:4});
			dataArr.addItem({text:"5e",textid:5});
			dataArr.addItem({text:"6f",textid:6});
		}
	]]>
</fx:Script>

<framework:FrameGrid id="mydg" x="0" y="36" width="488" height="289" dataProvider="{dataArray}" draggableColumns="false">
	<framework:groupedColumns>
		<!--<mx:AdvancedDataGridColumn dataField="isSelected"/>-->
		<mx:AdvancedDataGridColumn dataField="isSelected" headerText="aaa"/>
		<framework:ADGCheckBoxColumn toolTip="checkBox" enabled="false" dataField="isSelected" headerText="abx"/>
		<framework:ADGCheckBoxColumn toolTip="复选框" headerText="aab"/>
		<mx:AdvancedDataGridColumnGroup headerText="asdf">
			<framework:ADGDefaultColumn editable="true" dataField="name" />
			<framework:ADGDefaultColumn dataField="phone" />
			<framework:ADGDefaultColumn dataField="email" />
			<framework:ADGTextBoxColumn dataField="phone" editable="true" />
		</mx:AdvancedDataGridColumnGroup>
		<framework:ADGComboBoxColumn toolTip="下拉框" itemList="{dataArr}" labelField="text" valueField="textid" dataField="text"/>
		<framework:ADGButtonColumn toolTip="按钮啊" buttonLabel="aa" textAlign="center" headerText="buttonColumn"/>
	</framework:groupedColumns>
</framework:FrameGrid>

?

FrameGrid.as是我继承AdvanceDataGrid写的一个dg控件，主要还是用来定位回去，，就是我开头说的偷懒=。=

FrameGrid.as:

package cn.net.fjh.framework
{
	import flash.events.Event;
	import flash.events.FocusEvent;
	import flash.events.TextEvent;
	import mx.controls.AdvancedDataGrid;
	import mx.events.AdvancedDataGridEvent;
	import mx.events.DataGridEvent;
	import mx.events.FlexEvent;
	import mx.utils.ObjectUtil;
	import mx.collections.ArrayCollection;
	import flash.display.Sprite;
	
	public class FrameGrid extends AdvancedDataGrid
	{
		public function FrameGrid()
		{
			super();
			this.draggableColumns = false;
			this.addEventListener(FlexEvent.UPDATE_COMPLETE,locationOld);
		}
		
		private function locationOld(e:Event):void{
			var arr:Array = this.headerInfos as Array;
			focusFilterTextInput(arr);
		}
		
		private function focusFilterTextInput(arr:Array):void{
			for ( var i : int = 0; i < arr.length; i ++ ) { 
			    if(arr[i].children != null){
					focusFilterTextInput(arr[i].children as Array);
				}
				else{
					var obj:Object = ObjectUtil.getClassInfo(arr[i].headerItem);
					var ClassName:String = obj.name as String;
					if(ClassName.length > 1){
						if(ClassName.toString().search("ADGHeaderRenderer") > -1){
							//arr[i].headerItem
							var ADGHR:ADGHeaderRenderer = arr[i].headerItem as ADGHeaderRenderer;
							if(ADGHR.filterFlag){
								ADGHR.headerTextInput.setFocus();
								var textLength:int = ADGHR.headerTextInput.text.length;
								ADGHR.headerTextInput.setSelection(textLength,textLength);
								ADGHR.filterFlag = false;
							}
						}
					}
				}
			} 
		}		
	}
}

然后是实现列头过滤以及升降序的文件ADGHeaderRenderer.as（如果觉得上下箭头不好看，直接改改标题就好啦，或者也可以改成一个方法开放出来修改），关键是那个过滤，输入完一个字符输入框马上就失去焦点，我用了偷懒的方法，理应继承扩张Button类的，求大神指点。

ADGHeaderRenderer.as:

package cn.net.fjh.framework
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.collections.ArrayCollection;
	import mx.collections.Sort;
	import mx.collections.SortField;
	import mx.controls.AdvancedDataGrid;
	import mx.controls.Button;
	import mx.controls.Label;
	import mx.controls.TextInput;
	import mx.controls.listClasses.AdvancedListBaseContentHolder;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.core.UIComponent;
	import mx.events.CollectionEvent;
	import mx.events.FlexEvent; 
	
	
	public class ADGHeaderRenderer extends UIComponent implements IListItemRenderer   
	{
		
		private var _data:Object;
		private var headerLabel:Label = new Label(); 
		private var _columnName:String;
		private var _filterFlag:Boolean = false;
		private var headerSortButton:Label = new Label(); 
		private var up:String = "↑";//在这里修改升降序图标（其实就是字符，，）
		private var down:String = "↓";
		
		public var headerTextInput:TextInput =  new TextInput();
		
		public function ADGHeaderRenderer()
		{
			super();
			this.height = 40;
			this.addEventListener(MouseEvent.MOUSE_OVER,mouSEOverChangeOn);
			this.addEventListener(MouseEvent.MOUSE_OUT,mouSEOverChangeOff);
		}
		
		private function mouSEOverChangeOn(e:Event):void{
			headerSortButton.setStyle("color",0x000000);
		}
		
		private function mouSEOverChangeOff(e:Event):void{
			headerSortButton.setStyle("color",0xCCCCCC);
		}
		
		[Bindable("dataChange")]   
		public function get data():Object{
			return this._data;
		}
		public function set data(value:Object):void{
			this._data = value;
			invalidateProperties();   
			dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		}
		
		public function get columnName():String{
			return this._columnName;
		}
		public function set columnName(value:String):void{
			this._columnName = value;
		}
		
		public function get filterFlag():Boolean{
			return this._filterFlag;
		}
		public function set filterFlag(value:Boolean):void{
			this._filterFlag = value;
		}
		
		override protected function createChildren() : void           
		{                   
			super.createChildren();
			headerLabel.setStyle("color",0x000000);
			headerLabel.useHandCursor=true;  
			headerLabel.buttonMode=true;
			headerLabel.mouseChildren=false;
			headerLabel.addEventListener(MouseEvent.CLICK,sortButtonClick);
			addChild(headerLabel);           
			
			headerTextInput.setStyle("color",0xFF0000);     
			headerTextInput.setStyle("contentBackgroundColor",0xFFFFFF);
			headerTextInput.id = columnName+"TextInput";
			headerTextInput.addEventListener(Event.CHANGE,columnFilter);
			addChild(headerTextInput); 
			
			//headerSortButt
			//headerSortButton.i
			headerSortButton.text = up;
			headerSortButton.setStyle("color",0xCCCCCC);
			headerSortButton.useHandCursor=true;  
			headerSortButton.buttonMode=true;
			headerSortButton.mouseChildren=false;
			headerSortButton.addEventListener(MouseEvent.CLICK,sortButtonClick);
			addChild(headerSortButton);
		}  
		
		private function sortButtonClick(e:Event):void{
			var dg:FrameGrid = FrameGrid(this.owner);//获取DataGrid对象
			var arr:ArrayCollection = dg.dataProvider as ArrayCollection;
			arr.sort = new Sort();
			if(headerSortButton.text == down)
			{
				arr.sort.fields = [ new SortField(columnName,true,false) ];
				headerSortButton.text = up;
			}
			else
			{
				arr.sort.fields = [ new SortField(columnName,true) ];
				headerSortButton.text = down;
			}
			arr.refresh();
		}
		
		private function columnFilter(e:Event):void{
			this.filterFlag = true;
			var dg:FrameGrid = FrameGrid(this.owner);//获取DataGrid对象
			
			var arr:ArrayCollection = dg.dataProvider as ArrayCollection;
			//arr.addEventListener(CollectionEvent.COLLECTION_CHANGE,dgChange);
			arr.filterFunction = columnfilter;
			arr.refresh();
		}
		
		private function columnfilter(item:Object):Boolean{
			
			if(headerTextInput.text == "")
				return true;
			else
			{
				var str:String = item[columnName].toString();
				if(str.toLowerCase().search(headerTextInput.text.toLowerCase()) >= 0)
					return true;
				else
					return false;
			}
		}
		
		override protected function commitProperties():void              
		{                   
			super.commitProperties();  
			if(data.headerText == "")
			{
				headerLabel.text = data.dataField;     
				this.toolTip = data.dataField;
				headerSortButton.toolTip = data.dataField;
				headerTextInput.toolTip = data.dataField;
				headerLabel.toolTip = data.dataField;
			}
			else
			{
				headerLabel.text = data.headerText;     
				this.toolTip = data.headerText;
				headerSortButton.toolTip = data.headerText;
				headerTextInput.toolTip = data.headerText;
				headerLabel.toolTip = data.headerText;
			}
		}  
		
		override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number ) : void   
		{           
			super.updateDisplayList(unscaledWidth,unscaledHeight);    
			var labelPointX:int = (unscaledWidth-headerLabel.textWidth)/2-headerSortButton.width;
			headerLabel.move(labelPointX>0?labelPointX:0,(unscaledHeight-headerTextInput.height-headerLabel.height)/2);      
			headerLabel.setActualSize(unscaledWidth,20);
			var buttonPointX:int = unscaledWidth-headerSortButton.textWidth-5;
			headerSortButton.move(buttonPointX>0?buttonPointX:0,0);
			headerSortButton.setActualSize(13,unscaledHeight-20);
			headerTextInput.move(0,unscaledHeight-headerTextInput.height);          
			headerTextInput.setActualSize(unscaledWidth,20);      
		}  
		
		
		
	}
}

剩下的都是一些其他列的类，比较简单。

代码上传了，，，，使用方法就参考下使用例子吧~

下载：AdvancedDataGrid源代码（修正版）（上次的有点遗漏导致checkBox选择获取不了数据，已修正，2013-12-13）