给DataGrid添加CheckBox全选列

最新推荐文章于 2024-04-02 07:55:02 发布

weixin_33749242

最新推荐文章于 2024-04-02 07:55:02 发布

阅读量216

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/xiweicheng/677588

版权

最近做一个列表，需要用到全选列。于是先google一把，呵呵！这种基础的扩展网上还不少，不过很多都是你转我的，我转他的。而且有的功能还不健全。
比如有一类的扩展是通过覆盖validateProperties方法在实现的，这类的问题就是这些在点击全选的时候，列字段全选择了，但是在鼠标划过这些行的时候行上的选择框又自动的返回未选择的样子。
还有一些是内联的写在标签里的，这种方式不易扩展。还有一点最重要，网上的几乎所有的扩展都不支持当行全选后头部的全选框自动勾选的功能。
呵呵，最后只有自己再写一个。

我这边的要求很简单：
1、实现选择框列表，点击头部全选能全选
2、点击行选择框选中行，如果行全部选择，则头部选择框选择
3、能指定列的字段
4、在选择或则选中行时同时改变DataGrid的dataProvider中响应的数据值

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

代码如下：
CheckBoxColumn类

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类

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 类

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
}
}
}

调用代码：

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]