flex 给DataGrid添加CheckBox全选列

zhaishanhui

于 2015-05-20 12:20:42 发布

阅读量656

点赞数

分类专栏： flex

flex 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何通过扩展ItemRenderer、headerRenderer和DataGridColumn，自定义CheckBoxColumn类，实现Grid中具备选择功能的列。通过CheckBoxColumn、CheckBoxHeader和CheckBoxRenderer三个关键类的实现，详细阐述了自定义列的过程，包括设置渲染器、处理点击事件及数据更新等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实这个只是扩展了一下下ItemRenderer，headerRenderer ，然后继承DataGridColumn写一个自己的GridColumn。
扩展的类有三个，分别是：
1、CheckBoxColumn：这个类继承了DataGridColumn
2、CheckBoxHeader：继承了CheckBox
3、CheckBoxRenderer：继承了CheckBox
如图：

代码如下：
CheckBoxColumn类

Java代码

package org.extendx.grid
{
import mx.controls.dataGridClasses.DataGridColumn;
public class CheckBoxColumn extends DataGridColumn
{
public var header:CheckBoxHeader=null;
public var columnRenderers:Array=[];
public var checkField:String="selected";//默认选择框的字段
public function CheckBoxColumn(columnName:String=null)
{
super(columnName);
}
public function setColumnRenderers(o:CheckBoxRenderer){
this.columnRenderers.push(o);
}
}
}

CheckBoxHeader类

Java代码

package org.extendx.grid
{
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.DynamicEvent;
public class CheckBoxHeader extends CheckBox
{
private var _data:DataGridColumn;
private var isRegisted:Boolean=false;
public var checkField:String="selected";//默认选择框的字段
public function CheckBoxHeader()
{
super();
this.setStyle("paddingLeft",5);
this.addEventListener(MouseEvent.CLICK,this.onHeaderClick);
}
override public function set data(value:Object):void {
_data=value as DataGridColumn;
this.label=value.headerText
if(!this.isRegisted){
var cc:CheckBoxColumn=this.data as CheckBoxColumn;
cc.header=this;
this.checkField=cc.checkField;
this.isRegisted=true;
}
}
override public function get data():Object
{
return _data;
}
override public function set selected(value:Boolean):void{
super.selected=value;
if(listData){
var dg:DataGrid = DataGrid(listData.owner);
var de:DynamicEvent=new DynamicEvent("selectedAllChange");
de.selected=this.selected
dg.dispatchEvent(de);
}
}
private function onHeaderClick(e:MouseEvent){
var dg:DataGrid = DataGrid(listData.owner);
var s:ArrayCollection=ArrayCollection(dg.dataProvider);
var array=[];
for(var i=0;i<s.length;i++){
s[i][this.checkField]=this.selected;
}
dg.invalidateList();
}
}
}

CheckBoxRenderer 类

Java代码

package org.extendx.grid
{
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
import mx.controls.Label;
import mx.controls.TextInput;
public class CheckBoxRenderer extends CheckBox
{
private var isRegisted:Boolean=false;
public var checkField:String="selected";//默认选择框的字段
private var ml:Label=null
public function CheckBoxRenderer()
{
super();
this.setStyle("paddingLeft",5);
this.setStyle("fontStyle","italic");//fontStyle: normal | italic | oblique;]
this.setStyle("fontSize",13);//fontStyle: normal | italic | oblique;]
this.addEventListener(MouseEvent.CLICK,this.onReClick);
}
override public function set data(value:Object):void {
super.data=value;
this.label=value.displayName;//这个地方写死了显示字段，需要改的朋友可以改改试试
if(!isRegisted){
isRegisted=true
var dg:DataGrid = DataGrid(listData.owner)
var cc:CheckBoxColumn=dg.columns[listData.columnIndex];
this.checkField=cc.checkField;
}
this.selected=value[this.checkField];
}
override public function set selected(value:Boolean):void{
super.selected=value;
}
private function onReClick(e){
this.data[this.checkField]=this.selected;
var dg:DataGrid = DataGrid(listData.owner)
var cc:CheckBoxColumn=dg.columns[listData.columnIndex];
cc.header.selected=isAll();
}
private function isAll(){
var dg:DataGrid = DataGrid(listData.owner)
var s:ArrayCollection=ArrayCollection(dg.dataProvider);
for(var i=0;i<s.length;i++){
if(!s[i][this.checkField]){
return false
}
}
return true
}
}
}

调用代码：

Java代码

this.dg=new DataGrid();
var dgcc:CheckBoxColumn=new CheckBoxColumn();
dgcc.headerText="";
dgcc.width=25;
dgcc.dataField="displayName"
dgcc.checkField="selected"//设置选择框对应字段
dgcc.itemRenderer=new ClassFactory(CheckBoxRenderer);//此处还可以放到CheckBoxColumn内部
dgcc.headerRenderer=new ClassFactory(CheckBoxHeader);//此处还可以放到CheckBoxColumn内部
var dgcc2:DataGridColumn=new DataGridColumn();
dgcc2.headerText="";
//dgcc2.width=40;
dgcc2.dataField="displayName";
this.dg.columns=[dgcc,dgcc2]