Flex 4通过重写DataGridColumn和CheckBox类给DataGrid添加选择列-CheckBoxColumn

最近在尝试着用Flex做个文件按管理的工具，在文件列表中为了操作方便，想到了再列表控件DataGird中添加一个含有复选框的列，在表头的复选框可以实现全选功能，但DataGird自身并无此功能。参照网上的相关资料，总算折腾出来了，现把源码奉上，希望对需要的朋友有点帮助，不足之处也请高手指点。

最终的CheckBoxColumn包包含四个相关的类文件，分别是：

1、CenterCheckBox.as：通过重写CheckBox基类来实现复选框的居中显示；

2、CheckBoxColumn.as：继承自DataGridColumn的一个新类，为了实现需要，增添了几个新属性；

3、CheckBoxHeaderRenderer.as：继承自CenterCheckBox 类，用于DataGrid表头的复选框，实现全选功能；

4、CheckBoxItemRenderer.as：继承自CenterCheckBox 类，用于DataGrid表中的数据行；

各文件源码如下：
1、CenterCheckBox.as

package Common.YotuoUpload.CheckBoxColumn
{
import flash.display.DisplayObject;
import mx.controls.CheckBox;
import flash.text.TextField;

public class CenterCheckBox extends CheckBox
{
// 居中展现
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
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((unscaledWidth - c.width) / 2);
c.y = Math.round((unscaledHeight - c.height) /2 );
}
}
}
}
}

2、DataGridColumn.as

package Common.YotuoUpload.CheckBoxColumn
{
import mx.controls.dataGridClasses.DataGridColumn;

public class CheckBoxColumn extends DataGridColumn{

public var cloumnSelected:Boolean=false;//保存该列是否全选的属性（用户先点击全选后在手动的取消几行数据的选中状态时，这里的状态不会改变）

public var selectItems:Array = new Array();//用户保存用户选中的数据


public function CheckBoxColumn(columnName:String=null){
super(columnName);
}
}
}

3、CheckBoxHeaderRenderer.as

package Common.YotuoUpload.CheckBoxColumn
{
import flash.events.Event;

import mx.collections.ArrayCollection;
import mx.controls.CheckBox;
import mx.controls.DataGrid;

public class CheckBoxHeaderRenderer extends CenterCheckBox{

private var _data:CheckBoxColumn;//定义CheckBox列对象
public function CheckBoxHeaderRenderer(){
super();
this.addEventListener(Event.CHANGE,onChange);//CheckBox状态变化时触发此事件
this.toolTip = "全选";
}


override public function get data():Object{
return _data;//返回的是CheckBox列的对象

}

override public function set data(value:Object):void{
_data = value as CheckBoxColumn;
//trace(_data.cloumnSelected);
selected = _data.cloumnSelected;
}

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.cloumnSelected = this.selected;//更改列的全选状态

column.selectItems = new Array();//重新初始化用于保存选中列的对象

if(this.selected){//如果为全部选中的化就将数据源赋值给column.selectItems，不是就不管他，上一步已经初始化为空
column.selectItems = (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类中使用绑定而出现点击全选页面没有更改状态的错误
}
}
}

4、CheckBoxItemRenderer.as

package Common.YotuoUpload.CheckBoxColumn
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.CheckBox;
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.selectItems;
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)
}
}
}
}
}
}

调用示例：

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/halo" minWidth="1024" minHeight="768"
xmlns:CheckBoxColumn="Common.YotuoUpload.CheckBoxColumn.*"
creationComplete="Init()">
<fx:Script>
<![CDATA[
import Common.YotuoUpload.CheckBoxColumn.CheckBoxHeaderRenderer;
import Common.YotuoUpload.CheckBoxColumn.CheckBoxItemRenderer;
import mx.collections.ArrayCollection;

public var dataArray:ArrayCollection = new ArrayCollection;

private function Init():void{
dataArray.addItem({isSelected:false,name:'Christina Coenraets',phone:'555-219-2270',email:'[email protected]'});
dataArray.addItem({isSelected:false,name:'Joanne Wall',phone:'555-219-2012',email:'[email protected]'});
dataArray.addItem({isSelected:false,name:'Maurice Smith',phone:'555-219-2012',email:'[email protected]'});
dataArray.addItem({isSelected:false,name:'Mary Jones',phone:'555-219-2000',email:'[email protected]'});
dataArray.addItem({isSelected:false,name:'God Win',phone:'555-219-2005',email:'[email protected]'});
dgUser.dataProvider = dataArray;
}
]]>
</fx:Script>
<mx:DataGrid id="dgUser" x="10" y="10" width="450" height="200">
<mx:columns>
<CheckBoxColumn:CheckBoxColumn dataField="isSelected" width="25"
draggable="false" resizable="false" sortable="false"
headerRenderer="{new ClassFactory(CheckBoxHeaderRenderer)}"
itemRenderer="{new ClassFactory(CheckBoxItemRenderer)}"
/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="电话" dataField="phone"/>
<mx:DataGridColumn headerText="邮件" dataField="email"/>
</mx:columns>
</mx:DataGrid>
</s:Application>

2、通过代码动态调用：

<?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/halo" minWidth="1024" minHeight="768"
creationComplete="Init()">
<fx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import Common.YotuoUpload.CheckBoxColumn.CheckBoxColumn;
import Common.YotuoUpload.CheckBoxColumn.CheckBoxHeaderRenderer;
import Common.YotuoUpload.CheckBoxColumn.CheckBoxItemRenderer;
import mx.collections.ArrayCollection;

public var dataArray:ArrayCollection = new ArrayCollection;

private function Init():void{
dataArray.addItem({isSelected:false,name:'Christina Coenraets',phone:'555-219-2270',email:'[email protected]'});
dataArray.addItem({isSelected:false,name:'Joanne Wall',phone:'555-219-2012',email:'[email protected]'});
dataArray.addItem({isSelected:false,name:'Maurice Smith',phone:'555-219-2012',email:'[email protected]'});
dataArray.addItem({isSelected:false,name:'Mary Jones',phone:'555-219-2000',email:'[email protected]'});
dataArray.addItem({isSelected:false,name:'God Win',phone:'555-219-2005',email:'[email protected]'});

var _checkBoxCloumn:CheckBoxColumn = new CheckBoxColumn();
_checkBoxCloumn.dataField = "isSelected";
_checkBoxCloumn.headerRenderer = new ClassFactory(CheckBoxHeaderRenderer);
_checkBoxCloumn.itemRenderer = new ClassFactory(CheckBoxItemRenderer);
_checkBoxCloumn.width = 30;
_checkBoxCloumn.sortable = false;
_checkBoxCloumn.draggable = false;

var _nameColumn:DataGridColumn = new DataGridColumn();
_nameColumn.headerText = "姓名";
_nameColumn.dataField = "name";

var _telColumn:DataGridColumn = new DataGridColumn();
_telColumn.headerText = "电话";
_telColumn.dataField = "phone";

var _emailColumn:DataGridColumn = new DataGridColumn();
_emailColumn.headerText = "邮件";
_emailColumn.dataField = "email";

dgUser.columns = new Array(_checkBoxCloumn,_nameColumn,_telColumn,_emailColumn);
dgUser.dataProvider = dataArray;
}
]]>
</fx:Script>
<mx:DataGrid id="dgUser" x="10" y="10" width="450" height="200" />
</s:Application>

PS：该组件要求在数据源中存在属性isSelected（Boolean类型，用来记录当前行是否被选中）属性，这样就限制了程序的通用性，试了很多方法都未很好解决，希望有办法解决的朋友给以指点。

示例运行效果：

本文作者： 宜城小子 发于： http://blog.yotuo.net（转载请保留此信息）
原文链接： http://blog.yotuo.net/post/2009/11/DataGrid-CheckBoxColumn.html