关于在DataGrid中使用CheckBox全选

本文介绍如何在Flex DataGrid中实现通过Checkbox全选功能。通过使用可派发事件的引用对象作为数据源数据类型,结合CheckBoxHeaderColumn和自定义Renderer,实现了在点击表头Checkbox时同步更新所有行的选中状态。

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

    该文中提供在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") );
  }
 
 }
}
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值