`

Flex DataGrid CheckBox selectAll 全选实现

阅读更多
http://hi.baidu.com/qiyangyang2009/blog/item/e52825dc14be10fd76c63885.html/cmtid/fc9f115984c8278e800a18c1


引用
一,首先创建一个类继承自DataGridColumn用来用成员保存全选状态;

package com.sintrue.components.datagridcheckbox
{
 import mx.controls.dataGridClasses.DataGridColumn;
 public class CheckBoxHeaderColumn extends DataGridColumn
 {
  public function CheckBoxHeaderColumn(columnName:String=null)
  {
   super(columnName);
  }
  /**is the checkbox in header selected**/
  public var selected:Boolean = false;

 }
}

二,创建HeaderRenderer类,继承自CheckBox

package com.sintrue.components.datagridcheckbox
{

 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;
   var dg:DataGrid = DataGrid(listData.owner);//get DataGrid object
   if(dg.dataProvider.length>0){
            for(var i:int = 0; i < dg.dataProvider.length ; i++){
             dg.dataProvider[i].@selected = this.selected;
         }
           }
           dg.dataProvider.refresh();
  }

 }
} 

三 创建DataRenderer,继承自CheckBox

package com.sintrue.components.datagridcheckbox
{
 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
  {
   if(data is XML)
   data.@selected = this.selected;
   else
   data.selected = this.selected;
  }

 }
}

四,使用

<dataGrid:CheckBoxHeaderColumn textAlign="center"
            dataField="@selected" width="26"
            itemRenderer="com.sintrue.components.datagridcheckbox.CheckBoxItemDataRenderer"
            headerRenderer="com.sintrue.components.datagridcheckbox"/>





http://cookbooks.adobe.com/post_Select_all_checkboxes_in_a_datagrid-10786.html
http://www.justskins.com/forums/select-all-checkboxes-in-85899.html

http://www.fengfly.com/plus/view-172194-1.html



这个最简单好用.....哈哈
spark的checkbox没有data这个属性...mx的checkbox有data这个属性....

Select all checkboxes in datagrid via code

 
Im doing this:

private function selectAll():void {
var length : int = myDataGrid.dataProvider.length;
for( var i : int = 0; i < length; i++ )
{
var item : Object = myAccounts.getItemAt( i );
item["Include"] = '1';
}
myAccounts.refresh();
}

Include is my column of checkboxs in my datagrid

<mx:DataGridColumn headerText="Include" dataField="Include" width="58"
sortable="false">

<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="center">
<mx:CheckBox click="data.Include=!data.Include"
selected="{data.Include}" themeColor="#73B9B9"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>

</mx:DataGridColumn>


分享到:
评论

相关推荐

    Flex中DataGrid内嵌CheckBox的全选反选和防止选择状态错乱实现方法

    本文将详细探讨如何在Flex的DataGrid中实现CheckBox的全选和反选功能,以及如何防止选择状态错乱的问题。 首先,我们需要创建一个自定义的DataGrid列类,这个类将扩展mx.controls.gridClasses.GridColumn,并且包含...

    三种方式实现checkbox全选,反选

    selectAll(allCheckboxes, selectAllCheckbox); }); ``` **Java实现**: 在Java中,全选和反选通常在服务器端处理,涉及DOM操作较少。以下是一个基于Servlet的例子: ```java public void doPost...

    WPF-DataGrid中CheckBox实现全选与非全选

    &lt;CheckBox x:Name="selectAllCheckBox" Content="全选" IsChecked="{Binding IsAllSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/&gt; &lt;!-- 其他控件 --&gt; ``` 为了实现全选和非全选的功能,我们...

    Flex Datagrid全选功能

    "Flex Datagrid全选功能"是指在Datagrid中实现一个功能,让用户能够一键选择所有行,这在处理大量数据时非常有用。下面我们将详细探讨如何在Flex中实现Datagrid的全选功能。 1. **Datagrid组件**: Datagrid是Adobe ...

    DataGrid和AdvancedDataGrid CheckBox全选功能1.1

    在本文中,我们将深入探讨如何在Flex中实现DataGrid和AdvancedDataGrid组件的CheckBox全选功能。这个功能在数据展示和交互式操作中非常常见,它允许用户通过一个主CheckBox来选择或取消选择所有行数据。 首先,我们...

    WPF CheckBox全选、反选比较通用

    &lt;CheckBox Content="全选" x:Name="selectAllCheckbox" IsChecked="False"/&gt; ``` 接下来,我们需要创建一个ItemsControl或ListBox来显示可选项,并为每个项目添加一个CheckBox。这可以通过数据绑定和模板实现: ``...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...

    silverlight4 DataGrid控件 增删改 全选

    dataGrid.SelectAll(); else dataGrid.UnselectAll(); } ``` 在实际应用中,你可能还需要处理更多细节,比如数据验证、错误提示、分页和排序等。同时,为了提升用户体验,可以使用样式和模板来自定义DataGrid的...

    怎样在flex的datagrid中运用checkbox

    &lt;mx:CheckBox id="selectAllCheckBox" label="全选" change="selectAll(event)"/&gt; ``` 在ActionScript中,定义一个selectAll函数来处理这个事件: ```actionscript private function selectAll(event:Event):void ...

    WPF DATAGRID全选全不选

    全选" Click="SelectAll_Click" /&gt; 全不选" Click="DeselectAll_Click" /&gt; ``` 4. **编写事件处理函数**:在后台代码(如MainWindow.xaml.cs)中,为这两个按钮的Click事件添加事件处理函数: ```csharp private ...

    Check_DGV.rar

    在本文中,我们将深入探讨如何实现WPF(Windows Presentation Foundation)中的DataGrid控件的全选状态与子项选中状态的联动。标题"Check_DGV.rar"暗示我们关注的是一个与DataGrid相关的功能实现,可能是一个代码...

    ASP.NET程序中常用的三十三种代码.txt

     //改变列的选定,实现全选或全不选。  CheckBox chkExport ;  if( CheckAll.Checked)  {  foreach(DataGridItem oDataGridItem in MyDataGrid.Items)  {  chkExport = (CheckBox)oDataGridItem.FindControl...

    ASP.NET常用代码

    //改变列的选定,实现全选或全不选。 CheckBox chkExport ; if( CheckAll.Checked) { foreach(DataGridItem oDataGridItem in MyDataGrid.Items) { chkExport = (CheckBox)oDataGridItem.FindControl("chkExport"); ...

Global site tag (gtag.js) - Google Analytics