在DataGrid中使用CheckBox，实现全选功能

 

项目需要写了一个带CheckBox的DataGridColumn，在网上找了几个例子都不行，于是就参照着自己写了一个。本来是考虑在组件中使用一个属性或者用一个类来保存每一行CheckBox选中的属性，但是发现如果拉动滚动条的化就会出现已选择和为选择的行的“选中状态”变的混乱等等一些情况，后来发现这是因为DataGrid在拉动滚动条时会去动态的设置新显行的数据，而由于只初始化了一定数量的行，因此DataGrid会将新显示行的数据设置到因为滚动而不显示的行对象中，这样通过改变数据的方式来改变每行显示的数据，而这是我保存在行对象中CheckBox的属性也都会被重新设置，也就出现了混乱的情况，现在采用数据源来保存选中的状态该问题得以解决，但是该方法要求在数据源里新增加一个属性，始终觉的还是不太好，希望能有更好点的又不太复杂的方法能够解决此问题

 

/**

* 在DataGrid中使用显示CheckBox列的组件，该组件会保存用户选中的数据当前行的引用，

* 该组件要求在数据源中存在属性dgSelected属性，此属性用来记录当前行是否被选中

* 2008-12-15

* */

package org.puremvc.as3.demos.flex.weborb.commPkg.components.checkBoxColumn

{

import mx.controls.DataGrid;

import mx.controls.dataGridClasses.DataGridColumn;

import mx.controls.listClasses.ListData;

 

public class CheckBoxColumn extends DataGridColumn{

 

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

 

 

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

 

public function CheckBoxColumn(columnName:String=null){

super(columnName);

}

 

}

}

 

/**

* 显示CheckBox列组件的列标题，点击时会将整个数据源中的数据全部选中，反之全不选

* 2008-12-15

* */

package org.puremvc.as3.demos.flex.weborb.commPkg.components.checkBoxColumn

{

import flash.events.Event;

 

import mx.collections.ArrayCollection;

import mx.controls.CheckBox;

import mx.controls.DataGrid;

 

public class CheckBoxHeaderRenderer extends CheckBox{  

 

private var _data:CheckBoxColumn;//定义CheckBox列对象

 

public function CheckBoxHeaderRenderer(){

super();

this.addEventListener(Event.CHANGE,onChange);//CheckBox状态变化时触发此事件

this.label = "全选";

}

 

 

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();

 

}

 

 

 

 

for(var i:int = 0; i < dgDataArr.length ; i++){

Object(dgDataArr[i]).dgSelected = this.selected;//更改没一行的选中状态

}

}

}

}

 

/**

* 显示CheckBox列组件中每一行显示的ItemRenderer，用于在每一行前面添加一个CheckBox组件，

* 用户选择后会将该行数据添加到CheckBoxColumn组件中的数组中保存

* 2008-12-15

* */

package org.puremvc.as3.demos.flex.weborb.commPkg.components.checkBoxColumn

{

import flash.events.Event;

import flash.events.MouseEvent;

 

import mx.controls.CheckBox;

import mx.controls.DataGrid;

 

public class CheckBoxItemRenderer extends CheckBox{

 

private var currentData:Object; //保存当前一行值的对象

 

public function CheckBoxItemRenderer(){

super();

this.addEventListener(Event.CHANGE,onClickCheckBox);

}

 

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)

}

}

}

}

}

}

 

<mx:DataGrid id="dg" height="100%" width="100%" rowCount="5" dataProvider="{busiOperData}" fontSize="12">

<mx:columns>

<checkBoxColumn:CheckBoxColumn  headerText="" width="20" textAlign="center" sortable="false"

itemRenderer="{new ClassFactory(CheckBoxItemRenderer)}"

headerRenderer="{new ClassFactory(CheckBoxHeaderRenderer)}">

 

</checkBoxColumn:CheckBoxColumn>

 

 

 

<mx:DataGridColumn dataField="name" headerText="操作名称"/>

<mx:DataGridColumn dataField="real" headerText="操作实现"/>

<mx:DataGridColumn dataField="realType" headerText="实现类型"/>

<mx:DataGridColumn dataField="useScope" headerText="使用范围"/>

<mx:DataGridColumn dataField="depict" headerText="说明"/>

</mx:columns>

</mx:DataGrid>