Flex控件--AdvancedDataGrid实现列头过滤功能（顺便写了Button列、CheckBox列、ComboBox列等）

源于自己正在做的一个项目，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',phone:'555-219-2012',email:'maurice@fictitious.com',text:"1a",textid:1});
dataArray.addItem({isSelected:false,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',text:"1a",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,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）