涉及到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>