Flex DataGrid CheckBox 实现多选
涉及到4个相关的类，先列举如下：
1、CenterCheckBox.as：通过重写CheckBox基类来实现复选框的居中显示；
2、CheckBoxColumn.as：继承自DataGridColumn的一个新类，为了实现需要，增添了两个属性；
3、CheckBoxHeaderRenderer.as：继承自CenterCheckBox 类，用于DataGrid表头的复选框，实现全选功能；
4、CheckBoxItemRenderer.as：继承自CenterCheckBox 类，用于DataGrid表中的数据行
一、CenterCheckBox.as
package components
{
??? import flash.display.DisplayObject;
??? import flash.text.TextField;
???
??? import mx.controls.CheckBox;
???
??? public class CenterCheckBox extends CheckBox
??? {
??? ???
??? ??? //使复选框剧中显示
??? ??? override protected function updateDisplayList(width:Number, height:Number):void
??? ??? {
??? ??? ??? super.updateDisplayList(width,height);
??? ??? ??? var n:int = numChildren;
??? ??? ??? for( var i:int = 0;i<n;i++)
??? ??? ??? {
??? ??? ??? ??? var c:DisplayObject = getChildAt(i);
??? ??? ??? ??? if(!(c is TextField))
??? ??? ??? ??? {
??? ??? ??? ??? ??? c.x = Math.round((width - c.width) / 2);
??? ??? ??? ??? ??? c.y = Math.round((height - c.height) / 2);
??? ??? ??? ??? }
??? ??? ??? }
??? ??? }
??? }
}
二、CheckBoxColumn.as
package components
{
??? import mx.controls.dataGridClasses.DataGridColumn;
???
??? public class CheckBoxColumn extends DataGridColumn
??? {
??? ??? public var columnSelected:Boolean = false;//保存该列是否全选在属性(用户先点击全选后，再手动的取消几行数据的选中状态时，这里的状态不会改变)
??? ???
??? ??? public var selectedItems:Array = new Array();//用于保存用户选中在数据
??? ???
??? ??? public function CheckBoxColumn(columnName:String=null)
??? ??? {
??? ??? ??? super(columnName);?
??? ??? }
??? }
}
三、CheckBoxHeaderRenderer.as
package components
{
??? import flash.events.Event;
???
??? import mx.collections.ArrayCollection;
??? import mx.controls.DataGrid;
??? public class CheckBoxHeaderRenderer extends CenterCheckBox
??? {
??? ??? private var _data:CheckBoxColumn;//定义CheckBox列对象
??? ??? public function CheckBoxHeaderRenderer()
??? ??? {
??? ??? ??? super();
??? ??? ??? this.addEventListener(Event.CHANGE,onChange);
??? ??? ??? this.toolTip = "全选";
??? ??? }
??? ???
??? ??? override public function get data():Object
??? ??? {
??? ??? ??? return _data;
??? ??? }
??? ???
??? ??? override public function set data(value:Object):void
??? ??? {
??? ??? ??? _data = value as CheckBoxColumn;
??? ??? ??? this.selected = _data.columnSelected;
??? ??? }
??? ???
??? ??? private function onChange(event:Event):void
??? ??? {
??? ??? ??? var dg:DataGrid = DataGrid(listData.owner);//获取 DataGrid对象
??? ??? ??? var column:CheckBoxColumn = dg.columns[listData.columnIndex];//获取整列的显示对 象
??? ??? ??? var dgDataArr:ArrayCollection = dg.dataProvider as ArrayCollection;
??? ??? ??? column.columnSelected = this.selected;//更改列的全选状态
??? ??? ??? column.selectedItems = new Array();//重新初始化用于保存选中列的对象
??? ??? ??? if(this.selected)
??? ??? ??? {
??? ??? ??? ??? //如果为全部选中的化就将数据源赋值给column.selectItems，不是就不管他，上一步已经初始化为空
??? ??? ??? ??? column.selectedItems = (dg.dataProvider as ArrayCollection).toArray();
??? ??? ??? }
??? ??? ??? if(dgDataArr.length>0)
??? ??? ??? {
??? ??? ??? ??? if(dgDataArr[0]!="")
??? ??? ??? ??? {
??? ??? ??? ??? ??? for(var i:int = 0; i < dgDataArr.length ; i++)
??? ??? ??? ??? ??? {
??? ??? ??? ??? ??? ??? Object(dgDataArr[i]).dgSelected = this.selected;//更改没一行的选中状态
??? ??? ??? ??? ??? }?
??? ??? ??? ??? }?
??? ??? ??? ??? dgDataArr.refresh();//刷新 数据源，达到强制更新页面显示效果的功能，防止在使用时没有在VO类中使用绑定而出现点击全选页面没有更改状态的错误??????
??? ??? ??? }
??? ??? }
??? }
}
四、CheckBoxItemRenderer.as
?
package components
{
??? import flash.events.Event;
???
??? import mx.controls.DataGrid;
??? public class CheckBoxItemRenderer extends CenterCheckBox
??? {
??? ??? private var currentData:Object;//保存当前一行值在引用
??? ??? public function CheckBoxItemRenderer()
??? ??? {
??? ??? ??? super();
??? ??? ??? this.addEventListener(Event.CHANGE,onClickCheckBox);
??? ??? ??? this.toolTip = "选择";
??? ??? }
??? ???
??? ??? override public function set data(value:Object):void
??? ??? {
??? ??? ??? this.selected = value.dgSelected;
??? ??? ??? this.currentData = value;//保存整行在引用
??? ??? }
??? ??? //点击check box时，根据状况向selectedItems array中添加当前行的引用，或者从array中移除
??? ??? private function onClickCheckBox(e:Event):void
??? ??? {
??? ??? ??? var dg:DataGrid = DataGrid(listData.owner);//获取DataGrid对象
??? ??? ??? var column:CheckBoxColumn = dg.columns[listData.columnIndex];//获取整列的显示对 象
??? ??? ??? var selectItems:Array = column.selectedItems;
??? ??? ??? this.currentData.dgSelected = this.selected;
??? ??? ???
??? ??? ??? if(this.selected)
??? ??? ??? {
??? ??? ??? ??? selectItems.push(this.currentData);
??? ??? ??? }
??? ??? ??? else
??? ??? ??? {
??? ??? ??? ??? for(var i:int = 0; i<selectItems.length;i++)
??? ??? ??? ??? {
??? ??? ??? ??? ??? if(selectItems[i] == this.currentData)
??? ??? ??? ??? ??? {
??? ??? ??? ??? ??? ??? selectItems.splice(i,1);
??? ??? ??? ??? ??? }
??? ??? ??? ??? }
??? ??? ??? }
??? ??? }
??? }
}
?
五、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:comp="components.*" minWidth="955" minHeight="600" creationComplete="init()">
??? <fx:Declarations>
??? ??? <!-- Place non-visual elements (e.g., services, value objects) here -->
??? </fx:Declarations>
??? <fx:Script>
??? ??? <![CDATA[
??? ??? ??? import components.CheckBoxHeaderRenderer;
??? ??? ??? import components.CheckBoxItemRenderer;
??? ??? ??? import components.SequenceItemRenderer;
??? ??? ??? import mx.controls.Alert;
??? ??? ??? private var _indexRenderer:Class = SequenceItemRenderer;
??? ??? ???
??? ??? ??? private function init():void{?
??? ??? ??? ??? var array:Array = [];?
??? ??? ??? ??? for(var i:int = 1; i <= 10; i++){?
??? ??? ??? ??? ??? array.push({name:"name"+i.toString()});?
??? ??? ??? ??? }?
??? ??? ??? ??? grid.dataProvider = array;?
??? ??? ??? }?
??? ??? ??? private function commit():void
??? ??? ??? {
??? ??? ??? ??? Alert.show(checkbox.selectedItems.length+"");
??? ??? ??? }
??? ??? ]]>
??? </fx:Script>
??? <mx:DataGrid id="grid">?
??? ??? <mx:columns>?
??? ??? ??? <comp:CheckBoxColumn id="checkbox" dataField="isSelected" width="25"???
??? ??? ??? ??? ??? ??? ??? ??? ?draggable="false" resizable="false" sortable="false"
??? ??? ??? ??? ??? ??? ??? ??? ? headerRenderer="{new ClassFactory(components.CheckBoxHeaderRenderer)}"
??? ??? ??? ??? ??? ??? ??? ??? ? itemRenderer="{new ClassFactory(components.CheckBoxItemRenderer)}"/>
??? ??? ??? <mx:DataGridColumn headerText="no" itemRenderer="{new ClassFactory(_indexRenderer)}"/>?
??? ??? ??? <mx:DataGridColumn headerText="name" dataField="name"/>?
??? ??? </mx:columns>?
??? </mx:DataGrid>?
??? <s:Button label="提交" click="commit()"/>
</s:Application>
