关于在DataGrid中使用CheckBox全选

    该文中提供在datagrid中实现全部所有列的checkbox的问题.

   

    两个DataGrid使用同一个数据源，左边提供选择等操作，右边会即时更新。我的实现原理很简单，我使用可派发事件的引用对象作为数据源数据类型。

    所有源码：

 DataGrid_Checkbox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 xmlns:dataGrid="sban.flexStudy.dataGrid.*">
 
 <mx:Script>
  <![CDATA[
   [Bindable]
   private var data_myDataGrid : XMLList = <></>;
   
   private function headerClickHandler(event : Event) : void
   {
    for each(var xml : XML in data_myDataGrid)
    {
     xml.@selected = String(event.currentTarget.selected);
    }
   }
  ]]>
 </mx:Script>
 
 <mx:creationComplete>
  <![CDATA[
   for(var j : uint=0; j<10; j++)
   {
    data_myDataGrid += <item label={"Label"+j} data={"Data"+j} selected="false" />
   }
  ]]>
 </mx:creationComplete>
 
 <mx:DataGrid dataProvider="{data_myDataGrid}" x="10" y="10">
  <mx:columns>
   <mx:DataGridColumn dataField="@label" headerText="Label" />
   <mx:DataGridColumn dataField="@data" headerText="Data" />
   <dataGrid:CheckBoxHeaderColumn headerClick="headerClickHandler(event)"
    dataField="@selected" headerText="Select"
    itemRenderer="sban.flexStudy.dataGrid.CheckBoxItemDataRenderer"
    headerRenderer="sban.flexStudy.dataGrid.CheckBoxHeaderRenderer" />
  </mx:columns>
 </mx:DataGrid>
 
 <mx:DataGrid dataProvider="{data_myDataGrid}" x="320" y="10">
  <mx:columns>
   <mx:DataGridColumn dataField="@label" headerText="Label" />
   <mx:DataGridColumn dataField="@data" headerText="Data" />
   <mx:DataGridColumn dataField="@selected" headerText="Selected" />
  </mx:columns>
 </mx:DataGrid>
 
</mx:Application>

CheckBoxItemDataRenderer .as

package sban.flexStudy.dataGrid
{
 import flash.events.Event;
 
 import mx.controls.CheckBox;

 public class CheckBoxItemDataRenderer extends CheckBox
 {
  public function CheckBoxItemDataRenderer()
  {
   super();
   
   this.addEventListener(Event.CHANGE, changeHandler);
  }
  
  override public function set data(value:Object):void
  {
   super.data = value;
   this.selected = listData.label == 'true';
  }
  
  protected function changeHandler(event : Event) : void
  {
   data.@selected = this.selected;
  }
  
 }
}

CheckBoxHeaderColumn.as
package sban.flexStudy.dataGrid
{
 import mx.controls.dataGridClasses.DataGridColumn;
 
 [Event(name="headerClick", type="flash.events.Event")]

 public class CheckBoxHeaderColumn extends DataGridColumn
 {
  public function CheckBoxHeaderColumn(columnName:String=null)
  {
   super(columnName);
  }
  /**is the checkbox selected**/
  public var selected:Boolean = false;
  
 }
}
CheckBoxHeaderRenderer.as
package sban.flexStudy.dataGrid
{
 
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 import mx.controls.CheckBox;
 import mx.controls.DataGrid;
 import mx.events.DataGridEvent;
 public class CheckBoxHeaderRenderer extends CheckBox
 {
 
  public function CheckBoxHeaderRenderer()
  {
   super();
   //addEventListener("click", clickHandler);
  }
  private var _data:CheckBoxHeaderColumn;
  override public function get data():Object
  {
   return _data;
  }
  
  override public function set data(value:Object):void
  {
   _data = value as CheckBoxHeaderColumn;
   DataGrid(listData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler);
   selected = _data.selected;
  }
 
  private function sortEventHandler(event:DataGridEvent):void
  {
   if (event.itemRenderer == this)
    event.preventDefault();
  }
  
  override protected function clickHandler(event:MouseEvent):void
  {
   super.clickHandler(event);
   
   data.selected = selected;
   data.dispatchEvent( new Event("headerClick") );
  }
 
 }
} 

评论

1 楼 puppet_liu 2010-12-04  

找了很多例子，发现就这边例子最好最简单。。顶。