关于在DataGrid中使用CheckBox全选

最新推荐文章于 2023-08-09 14:41:42 发布

原创最新推荐文章于 2023-08-09 14:41:42 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flash #XML #J# #Adobe

java&flex 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在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") );
  }

}
}