flex AdvancedDataGrid实现checkbox全选

zengxiangshun

还有几个好的例子的地址：http://www.ityangba.com/thread-126-1-1.html，可以与下面的对比参照。
--------------------------------------------------------------------

http://blog.yotuo.net/post/2009/11/DataGrid-CheckBoxColumn.html
最近在尝试着用Flex做个文件按管理的工具，在文件列表中为了操作方便，想到了再列表控件DataGird中添加一个含有复选框的列，在表头的复选框可以实现全选功能，但DataGird自身并无此功能。参照网上的相关资料，总算折腾出来了，现把源码奉上，希望对需要的朋友有点帮助，不足之处也请高手指点.
最终的CheckBoxColumn包包含四个相关的类文件，分别是：
1、CenterCheckBox.as：通过重写CheckBox基类来实现复选框的居中显示；

2、CheckBoxColumn.as：继承自DataGridColumn的一个新类，为了实现需要，增添了几个新属性；

3、CheckBoxHeaderRenderer.as：继承自CenterCheckBox 类，用于DataGrid表头的复选框，实现全选功能；

4、CheckBoxItemRenderer.as：继承自CenterCheckBox 类，用于DataGrid表中的数据行；

各文件源码如下：
1.CenterCheckBox.as
package checkBox.test{import flash.display.DisplayObject;       import mx.controls.CheckBox;       import flash.text.TextField;            public class CenterCheckBox extends CheckBox       {           // 居中展现           override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void           {               super.updateDisplayList(unscaledWidth, unscaledHeight);               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((unscaledWidth - c.width) / 2);                       c.y = Math.round((unscaledHeight - c.height) /2 );                   }               }           }       } }
2.CheckBoxColumn.as
package checkBox.test{import mx.controls.dataGridClasses.DataGridColumn;          public class CheckBoxColumn extends DataGridColumn{                  public var cloumnSelected:Boolean=false;//保存该列是否全选的属性（用户先点击全选后在手动的取消几行数据的选中状态时，这里的状态不会改变）                            public var selectItems:Array = new Array();//用户保存用户选中的数据                       public function CheckBoxColumn(columnName:String=null){             super(columnName);          }     } }
3.CheckBoxHeaderRenderer.as
package checkBox.test{import flash.events.Event;import mx.collections.ArrayCollection;import mx.controls.DataGrid; import checkBox.test.CenterCheckBox;  import checkBox.test.CheckBoxHeaderRenderer;      import checkBox.test.CheckBoxItemRenderer;  import checkBox.test.CheckBoxColumn;       public class CheckBoxHeaderRenderer extends CenterCheckBox{                     private var _data:CheckBoxColumn;//定义CheckBox列对象              public function CheckBoxHeaderRenderer(){             super();             this.addEventListener(Event.CHANGE,onChange);//CheckBox状态变化时触发此事件             this.toolTip = "全选";         }                           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();                              }             if(dgDataArr.length>0){                 if(dgDataArr[0]!=""){                     for(var i:int = 0; i < dgDataArr.length ; i++){                         Object(dgDataArr).dgSelected = this.selected;//更改没一行的选中状态                     }                  }               }              dgDataArr.refresh();//刷新数据源，达到强制更新页面显示效果的功能，防止在使用时没有在VO类中使用绑定而出现点击全选页面没有更改状态的错误               }     } }
4.CheckBoxItemRenderer.as
package checkBox.test{import flash.events.Event;     import flash.events.MouseEvent;     import mx.controls.CheckBox;     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.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 == this.currentData){                         selectItems.splice(i,1)                     }                 }             }         }     } }
调用示例：
1、在mxml中作为控件调用：
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="Init()" horizontalAlign="center"xmlns:CheckBoxColumn ="checkBox.test.*" >    <mx:Script>          <![CDATA[              import checkBox.test.CenterCheckBox;              import checkBox.test.CheckBoxHeaderRenderer;              import checkBox.test.CheckBoxItemRenderer;              import checkBox.test.CheckBoxColumn;              import mx.collections.ArrayCollection;                            public var dataArray:ArrayCollection = new ArrayCollection;                            private function Init():void{                  dataArray.addItem({isSelected:false,name:'Christina Coenraets',phone:'555-219-2270',email:'ccoenraets@fictitious.com'});                  dataArray.addItem({isSelected:false,name:'Joanne Wall',phone:'555-219-2012',email:'jwall@fictitious.com'});                  dataArray.addItem({isSelected:false,name:'Maurice Smith',phone:'555-219-2012',email:'maurice@fictitious.com'});                  dataArray.addItem({isSelected:false,name:'Mary Jones',phone:'555-219-2000',email:'mjones@fictitious.com'});                  dataArray.addItem({isSelected:false,name:'God Win',phone:'555-219-2005',email:'godwin@fictitious.com'});                  dgUser.dataProvider = dataArray;              }          ]]>      </mx:Script>          <mx:DataGrid id="dgUser" x="10" y="10" width="450" height="200">          <mx:columns>              <CheckBoxColumn:CheckBoxColumn dataField="isSelected" width="25"                                               draggable="false" resizable="false" sortable="false"                                            headerRenderer="{new ClassFactory(CheckBoxHeaderRenderer)}"                                            itemRenderer="{new ClassFactory(CheckBoxItemRenderer)}"></CheckBoxColumn:CheckBoxColumn>            <mx:DataGridColumn headerText="姓名" dataField="name"/>              <mx:DataGridColumn headerText="电话" dataField="phone"/>              <mx:DataGridColumn headerText="邮件" dataField="email"/>          </mx:columns>      </mx:DataGrid>  </mx:Application>
2、通过代码动态调用：
<?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/halo" minWidth="1024" minHeight="768"                creationComplete="Init()">      <fx:Script>          <![CDATA[              import mx.controls.dataGridClasses.DataGridColumn;              import Common.YotuoUpload.CheckBoxColumn.CheckBoxColumn;              import Common.YotuoUpload.CheckBoxColumn.CheckBoxHeaderRenderer;              import Common.YotuoUpload.CheckBoxColumn.CheckBoxItemRenderer;              import mx.collections.ArrayCollection;                            public var dataArray:ArrayCollection = new ArrayCollection;                            private function Init():void{                  dataArray.addItem({isSelected:false,name:'Christina Coenraets',phone:'555-219-2270',email:'ccoenraets@fictitious.com'});                  dataArray.addItem({isSelected:false,name:'Joanne Wall',phone:'555-219-2012',email:'jwall@fictitious.com'});                  dataArray.addItem({isSelected:false,name:'Maurice Smith',phone:'555-219-2012',email:'maurice@fictitious.com'});                  dataArray.addItem({isSelected:false,name:'Mary Jones',phone:'555-219-2000',email:'mjones@fictitious.com'});                  dataArray.addItem({isSelected:false,name:'God Win',phone:'555-219-2005',email:'godwin@fictitious.com'});                                    var _checkBoxCloumn:CheckBoxColumn = new CheckBoxColumn();                  _checkBoxCloumn.dataField = "isSelected";                  _checkBoxCloumn.headerRenderer = new ClassFactory(CheckBoxHeaderRenderer);                  _checkBoxCloumn.itemRenderer = new ClassFactory(CheckBoxItemRenderer);                  _checkBoxCloumn.width = 30;                  _checkBoxCloumn.sortable = false;                  _checkBoxCloumn.draggable = false;                                    var _nameColumn:DataGridColumn = new DataGridColumn();                  _nameColumn.headerText = "姓名";                  _nameColumn.dataField = "name";                                    var _telColumn:DataGridColumn = new DataGridColumn();                  _telColumn.headerText = "电话";                  _telColumn.dataField = "phone";                                    var _emailColumn:DataGridColumn = new DataGridColumn();                  _emailColumn.headerText = "邮件";                  _emailColumn.dataField = "email";                                    dgUser.columns = new Array(_checkBoxCloumn,_nameColumn,_telColumn,_emailColumn);                  dgUser.dataProvider = dataArray;              }          ]]>      </fx:Script>      <mx:DataGrid id="dgUser" x="10" y="10" width="450" height="200" />  </s:Application>
PS：该组件要求在数据源中存在属性isSelected（Boolean类型，用来记录当前行是否被选中）属性，这样就限制了程序的通用性，试了很多方法都未很好解决，希望有办法解决的朋友给以指点。
示例运行效果：