涉及到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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。