`
mmk12333
  • 浏览: 34969 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flex dataGrid组件全选,反选,并获取选中值,代码详解

    博客分类:
  • flex
阅读更多

 

//1  组建重写

package hxht.comps.datagrid
{
 import flash.display.DisplayObject;
 import flash.events.Event;
 import flash.events.MouseEvent;
 
 import mx.collections.ArrayCollection;
 import mx.collections.IList;
 import mx.events.DynamicEvent;
 
 import spark.components.gridClasses.IGridItemRenderer;
 
 [Event(name="selectionChangeWithFiler",type="mx.events.DynamicEvent")]
 [Event(name="doubleClickWithFiler",type="mx.events.DynamicEvent")]
 [Event(name="HXCheckedChangeEvent",type="flash.events.Event")]
 public class DataGridCheck extends DataGridLocal
 {
  public function DataGridCheck()
  {
   super();
   catchSelectedItems = new ArrayCollection() ;
   this.addEventListener( "OneSelectedEvent" , oneSelectedHandler ) ;
   this.addEventListener( "AllSelectedEvent" , allSelectedHandler ) ;
  }
  
  /**
   * 选中数据源
   */  
  [Bindable]
  public var catchSelectedItems:ArrayCollection = new ArrayCollection() ;
  
  /**
   * 选中对象地图
   */  
 // [Bindable]
  //public var catchSelectedMap:Object = new Object() ;
  
  private var _changFilter:String = "" ;
  
  [Bindable]
  /**
   * 是不是单选 模式
   */  
  public var isRadio:Boolean = false ;
  
  /**
   * 需要动态设置对象 的属性
   */  
  public var selectedatt:String = "selected" ;
  
  /**
   * 选择地图 属性
   */  
  //public var selectedmapatt:String = "id" ;
  
  //override public function set dataProvider(value:IList):void
  //{
  // super.dataProvider = value ;
  // reset() ;
  //}
  
  /**
   * 
   *
   */  
  override protected function selectedcHandler( e:MouseEvent ):void
  {
   var _colugrd:IGridItemRenderer = getColumnc(e.target as DisplayObject ,IGridItemRenderer ) as IGridItemRenderer ;
   if(_colugrd)
   { 
    if(_changFilter && _changFilter!="" && changFilter.indexOf( (","+_colugrd.column.columnIndex+","))>-1)
      return ;
    else
    {
     var _et:String = "selectionChangeWithFiler" ;
     if(e.type == MouseEvent.DOUBLE_CLICK)
      _et = "doubleClickWithFiler" ;
     var _ev:DynamicEvent = new DynamicEvent(_et) ;
     _ev.data = this.selectedItem ;
     this.dispatchEvent( _ev ) ;
    }
   }
  }
  
  override protected function getColumnc( ui:DisplayObject , cls:Class ):Object
  {
   var _re:Object ;
   var _uiv:DisplayObject = ui ;
   while(true)
   {
    if(_uiv is cls )
    {
     _re = _uiv ;
     break ;
    }
    
    if(_uiv && _uiv.parent)
     _uiv = _uiv.parent as DisplayObject ;
    else
     break ;
   }
   return _re ;
  }
  
  /**
   * 
   *
   */  
  protected function reset():void
  {
   if(catchSelectedItems==null)
    catchSelectedItems = new ArrayCollection() ;
   else 
   {
    catchSelectedItems.removeAll() ;
    catchSelectedMap = new Object() ;
   }
   
   if(dataProvider && dataProvider.length>0)
   {
    selecteedfdfdf(false) ;
   }
  }
  
  protected function selecteedfdfdf( value:Boolean):void
  {
   var _ev:DynamicEvent = new DynamicEvent("AllSelectedEvent_dg") ;
   _ev.selected = value ;
   _ev.data = "all" ;
   this.dispatchEvent( _ev ) ;
  }
  
  /**
   * 反转选中的
   *
   */  
  public function reverseChecked():void
  {
   if(this.dataProvider)
   {
    if(catchSelectedItems==null)
     catchSelectedItems = new ArrayCollection() ;
    
    var _len:int = dataProvider.length;
    catchSelectedItems.removeAll() ;
    catchSelectedMap = new Object() ;
    var _value:Object ;
    for(var i:int =0;i<_len;i++)
    {
     _value = dataProvider.getItemAt(i) ;
     
     if(_value.hasOwnProperty(selectedatt))
      _value[selectedatt] = !(Boolean(_value[selectedatt]));
     
     //存储选中对象
     if( _value[selectedatt] == true )
     {
      catchSelectedItems.addItem( _value ) ;
      if(_value.hasOwnProperty(selectedmapatt))
       catchSelectedMap[_value[selectedmapatt]+""] = _value ;
     }
    }
   }
   refreshSelectAllBox() ;
  }
  
  /**
   * 全选 反选 接口
   * @param selectedv 全选true 反选 false
   *
   */  
  public function checkedAll( selectedv:Boolean = true ):void
  {
   if(this.dataProvider)
   {
    if(catchSelectedItems==null)
     catchSelectedItems = new ArrayCollection() ;
    var _len:int = dataProvider.length;
    
    //如果已经全选中了不进行处理
    if(catchSelectedItems.length ==_len && selectedv)return;
    
    //如果已经全取消不进行处理
    if(catchSelectedItems.length == 0 && !selectedv)return;
    
    catchSelectedItems.removeAll() ;
    catchSelectedMap = new Object() ;
    
    for(var i:int =0;i<_len;i++)
    {
     var _value:Object = dataProvider.getItemAt(i) ;
     
     if(_value.hasOwnProperty(selectedatt))
      _value[selectedatt] = selectedv;
     
     //存储选中对象
     if(selectedv)
     {
      catchSelectedItems.addItem( _value ) ;
      if(_value.hasOwnProperty(selectedmapatt))
       catchSelectedMap[_value[selectedmapatt]+""] = _value ;
     }
    }
   }
   refreshSelectAllBox() ;
   
   this.dispatchEvent(new Event("HXCheckedChangeEvent"));
  }
  
  /**
   * 
   * @param data
   * @param att
   *
   */  
  public function checkItem( data:Object ):void
  {
   if(data && data.hasOwnProperty(selectedatt))
   {
    data[selectedatt] = false ;
    data[selectedatt] = true ;
    
    checkItemData(data , true ,false ) ;
   }
  }
  
  /**
   *
   * @param e
   *
   */  
  protected function allSelectedHandler( e:DynamicEvent ):void
  {
   checkedAll( e.selected as Boolean );
  }
  
  protected function oneSelectedHandler( e:DynamicEvent ):void
  {
   if(catchSelectedItems==null)
    catchSelectedItems = new ArrayCollection() ;
   
//   var _index:int = catchSelectedItems.getItemIndex( _item ) ;
//   
//   //选中存储对象
//   if(_selected && _index==-1)
//    catchSelectedItems.addItem( _item ) ;
//    
//    //没有选中删除对象
//   else if(_index>=0)
//    catchSelectedItems.removeItemAt( _index ) ;
   //全循环 准确率高点
   catchSelectedItems.removeAll() ;
   catchSelectedMap = new Object() ;
   var _value:Object ;
      checkItemData( e.data , isRadio ) ;
  }
  
  /**
   * 
   * @param item
   * @param selected
   *
   */  
  protected function checkItemData( item:Object , selected:Boolean , ev:Boolean=true):void
  {
   catchSelectedItems.removeAll() ;
   catchSelectedMap = new Object() ;
   var _value:Object ;
   if(selected)
   {
    catchSelectedItems.addItem( item ) ;
    for each( _value in dataProvider )
    {
     if(_value!=item && _value.hasOwnProperty(selectedatt) )
     {
      _value[selectedatt] = false ;
     }
     else
     {
      _value[selectedatt] = false ;
      _value[selectedatt] = true ;
     }
    }
   }
   else
   {
    for each( _value in dataProvider )
    {
     if(_value.hasOwnProperty(selectedatt) && _value[selectedatt] == true )
     {
      catchSelectedItems.addItem( _value ) ;
      if(_value.hasOwnProperty(selectedmapatt))
       catchSelectedMap[_value[selectedmapatt]+""] = _value ;
     }
    }
    refreshSelectAllBox();
   }
   
   if(ev)
    this.dispatchEvent(new Event("HXCheckedChangeEvent"));
  }
  
  /**
   * 判断是否勾选全选
   */
  protected function refreshSelectAllBox():void
  {
   //判断是否勾选全部选中
   if( dataProvider )
   {
    var _ev:DynamicEvent = new DynamicEvent("AllSelectedEvent_dg") ;
    _ev.data = "null" ;
    if(catchSelectedItems.length == dataProvider.length && catchSelectedItems.length != 0)
     _ev.selected = true ;
    else
     _ev.selected = false ;
    this.dispatchEvent(_ev) ;
   }
  }

  /**
   * ,0,1,2,
   */
  override public function get changFilter():String
  {
   return _changFilter ;
  }

  /**
   * @private
   */
  override public function set changFilter(value:String):void
  {
   if(_changFilter!="")
   {
    this.removeEventListener( MouseEvent.CLICK, selectedcHandler ) ;
    this.removeEventListener( MouseEvent.DOUBLE_CLICK, selectedcHandler ) ;
   }
   _changFilter = value;
   if(_changFilter && _changFilter!="")
   {
    this.addEventListener( MouseEvent.CLICK , selectedcHandler ) ;
    this.addEventListener( MouseEvent.DOUBLE_CLICK , selectedcHandler ) ;
   }
  }

 }
}

 

//一下是两个渲染器

<?xml version = "1.0" encoding = "utf-8"?>
<s:GridItemRenderer xmlns:fx = "http://ns.adobe.com/mxml/2009"
                    xmlns:s = "library://ns.adobe.com/flex/spark"
                    xmlns:mx = "library://ns.adobe.com/flex/mx"
                    contentBackgroundAlpha = "0"
                    remove = "griditemrenderer1_removeHandler(event)">
 <fx:Metadata>
  [Style(name="bgfills", type="Array" )]
  [Style(name="borderColor", type="uint", format="Color", inherit="no")]
 </fx:Metadata>
    <fx:Script>
        <![CDATA[
            import mx.events.DynamicEvent;
            import mx.events.FlexEvent;

            [Bindable]
            public var checked:Boolean = false;

            override public function set owner(value:DisplayObjectContainer):void
            {
                super.owner = value;
                if (owner)
                    owner.addEventListener("AllSelectedEvent_dg", selectedHandler);
            }

            protected function griditemrenderer1_removeHandler(event:FlexEvent):void
            {
                if (owner)
                    owner.removeEventListener("AllSelectedEvent_dg", selectedHandler);
            }

            private function selectedHandler(e:DynamicEvent):void
            {
                checked = e.selected;
            }

            private function checkbox1_changeHandler():void
            {
                if (owner)
                {
                    var ev:DynamicEvent = new DynamicEvent("AllSelectedEvent");
                    ev.data = this;
                    ev.selected = checkf.selected;
                    owner.dispatchEvent(ev);
                }
            }
   
   override protected function updateDisplayList(w:Number, h:Number):void
   {
    var _arr:Array = this.getStyle("bgfills") ;
    if(_arr && _arr.length>=3)
    {
     fill1.color = _arr[0] ;
     fill2.color = _arr[1] ;
     fill3.color = _arr[2] ;
    }
     
    super.updateDisplayList(w,h) ;
   }
        ]]>
    </fx:Script>
 
 <s:Group width="100%" height="100%">
  <!--- @private -->
  <s:Rect id="fill" left="0" right="0" top="0" bottom="0">
   <s:fill>
    <s:LinearGradient rotation="90">
     <s:GradientEntry id="fill1" color="0xe7f3ff"  />
     <s:GradientEntry id="fill2" color="0xf0f7ff" />
     <s:GradientEntry id="fill3" color="0xffffff" />
    </s:LinearGradient>
   </s:fill>
  </s:Rect>
 </s:Group>
    <s:CheckBox id = "checkf"
       styleName="listCheckSty_sys" 
                selected = "@{checked}"
                buttonMode = "true"
                verticalCenter = "0"
                horizontalCenter = "0"
                click = "checkbox1_changeHandler()"/>
</s:GridItemRenderer>
//2

<?xml version = "1.0" encoding = "utf-8"?>
<renders:GridItemRenderLocal xmlns:fx = "http://ns.adobe.com/mxml/2009"
                             xmlns:s = "library://ns.adobe.com/flex/spark"
                             xmlns:mx = "library://ns.adobe.com/flex/mx"
                             xmlns:renders = "hxht.comps.datagrid.renders.*">

    <fx:Script>
        <![CDATA[
            import mx.events.DynamicEvent;

            private function checkbox1_changeHandler():void
            {
                if (owner)
                {
                    var ev:DynamicEvent = new DynamicEvent("OneSelectedEvent");
                    ev.data = this.data;
                    ev.selected = checkf.selected;
                    owner.dispatchEvent(ev);
                }
            }
        ]]>
    </fx:Script>

    <s:Group width = "100%"
             height = "{rowHeight}" verticalCenter="0">
        <s:CheckBox selected = "@{data.selected}"
                    id = "checkf"
     styleName="listCheckSty_sys" 
                    verticalCenter = "0"
                    horizontalCenter = "0"
                    buttonMode = "true"
                    click = "checkbox1_changeHandler()"/>
    </s:Group>

</renders:GridItemRenderLocal>

 

 

//用法

<datagrid:DataGridCheck width="100%"
          height="100%"
          id="dg0"
          //dataProvider="绑定的arrayCollection"
          catchSelectedItems="选中的记录存入(一个arrayCollection)">
     <datagrid:columns>
      <s:ArrayCollection>
       <s:GridColumn headerRenderer = "HeaderCheckRender"
            itemRenderer = "ColumnCheckRender"
            width = "50"/>
       <s:GridColumn headerText="***"
            dataField="***"/>

                    。。。。。

方法写的很详细, 直接复制粘贴就用拉。用完了别忘了谢谢我!

 

分享到:
评论

相关推荐

    Flex dataGrid 全选、反选

    本文将详细讨论如何在Flex DataGrid中实现全选和反选功能,并结合`checkBox`来优化这一过程。 首先,我们要理解DataGrid的结构。DataGrid由多个列组成,每一列可能包含不同类型的控件,如文本、图像或复选框。在...

    flex datagrid checkbox 全选/反选

    ### Flex DataGrid Checkbox 全选/反选知识点详解 #### 一、概述 Flex DataGrid 控件是Adobe Flex框架中的一个重要组成部分,它提供了一个灵活的方式来展示数据列表,并且支持多种功能,如排序、分组、筛选等。在...

    DataGridView标头CheckBox全选反选

    在这里,我们需要遍历`DataGridView`的所有行,检查每行的复选框状态,并根据全选/反选的逻辑进行更新。 3. **同步状态**: 当用户更改了任何行中的`CheckBox`状态时,我们也需要更新列头的`CheckBox`状态,以反映...

    flex4 list全选,反选

    本文将详细探讨如何在Flex4的List组件上实现全选和反选功能。 首先,我们需要了解Flex4 List的基本结构。List组件通过数据Provider(通常是ArrayCollection或XMLListCollection)来存储和显示数据。每个数据项对应...

    flex Datagrid checkbox全选

    在Flex开发中,Datagrid是一种常用的组件,用于展示表格数据,而checkbox全选功能则是提高用户体验的一个重要特性。本文将详细讲解如何实现Flex Datagrid中checkbox的全选功能。 首先,我们要了解Flex Datagrid的...

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

    以上就是Flex中DataGrid内嵌CheckBox实现全选反选及防止选择状态错乱的基本步骤。通过自定义列类、监听CheckBox事件和处理全选/全反逻辑,我们可以创建一个功能完善的多选DataGrid。在实际项目中,还可以根据需求...

    silverlight实现datagrid全选、反选、分页、导出EXCEL

    当用户点击这个复选框时,会触发事件,该事件遍历DataGrid的所有行并设置它们的IsSelected属性,从而实现全选或反选的效果。 ### 分页功能 分页是处理大量数据的关键,因为它可以避免一次性加载所有数据导致的性能...

    flex datagrid 嵌套checkbox实现全选

    在Flex开发中,数据网格...总结,这个Flex3示例展示了如何在DataGrid中嵌套复选框并实现全选功能,这对于构建交互式的数据管理界面至关重要。通过学习和实践,开发者可以创建更灵活、用户友好的数据操作界面。

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

    在JavaScript中,可以通过获取全选按钮的`checked`属性来控制所有复选框的状态。当全选按钮被选中时,设置所有复选框的`checked`属性为`true`;反之,如果全选按钮未选中,将`checked`属性设为`false`。 ```...

    Flex Datagrid全选功能

    在Flex编程中,Datagrid组件是用于展示数据集的一个强大工具,它允许用户进行交互式的数据浏览和操作。"Flex Datagrid全选功能"是指在Datagrid中实现一个功能,让用户能够一键选择所有行,这在处理大量数据时非常...

    在DataGrid中使用CheckBox,实现全选功能

    这个场景下,用户可能需要实现一个常见的功能,即在DataGrid中添加CheckBox,允许用户进行多选操作,尤其是全选功能。这篇博客“在DataGrid中使用CheckBox,实现全选功能”详细介绍了如何实现这一需求。 首先,我们...

    DataGrid全选并获取选中条目数

    本文将深入探讨如何实现DataGrid的全选功能,并详细讲解如何获取选中条目数。 首先,我们要了解DataGrid的基本操作。DataGrid通常与数据源绑定,例如数据库、数组或集合。它允许用户浏览、编辑和操作数据。全选功能...

    flex中dataGrid全选和全不选功能

    下面我们将详细探讨如何在Flex的DataGrid中实现全选和全不选的功能。 ### 一、理解Flex DataGrid 首先,我们需要了解Flex中的DataGrid是如何工作的。DataGrid组件依赖于数据提供者(dataProvider),通常是一个 ...

    Flex DataGrid CheckBox 一个简单的全选

    在Flex开发中,DataGrid组件是一个非常常用的控件,它用于展示数据集合,并提供交互式操作,如排序、选择等。本示例聚焦于DataGrid中的CheckBox集成,特别是实现一个全选的功能。以下是对这个主题的详细解释: 一、...

    Flex DataGrid组件 使用详解

    Flex DataGrid组件是Adobe Flex框架中的一个重要控件,专门用于以表格形式展示数据。它具有丰富的功能和灵活性,常用于企业级应用中显示多属性对象的列表。DataGrid组件不仅支持基本的表格布局,还提供了排序、编辑...

    datagrid全选(JS)

    为了提高用户体验并简化操作流程,开发人员经常需要为DataGrid添加全选和反选的功能。本文将详细介绍如何使用JavaScript来实现这一功能,并深入探讨其实现原理和技术细节。 #### 功能概述 本示例中的`selectall`...

    WPF DATAGRID全选全不选

    在WPF的DataGrid控件中,全选和全不选功能可以通过绑定到DataGrid的选中项集合(SelectedItems)并监听其变化来实现。以下是一个简化的实现步骤: 1. **创建DataGrid控件**:在XAML中,首先我们需要定义一个...

    WPF CheckBox全选、反选比较通用

    在开发用户界面时,特别是在涉及到多选列表时,全选和反选功能是常见的需求。本教程将详细介绍如何在WPF中实现CheckBox的全选和反选功能。 首先,我们需要理解CheckBox的基本用法。在XAML中,我们可以创建一个...

    flex在DataGrid中实现checkbox全选或取消

    本文将深入探讨如何在Flex中的DataGrid组件中实现复选框的全选与取消全选功能,这对于数据操作和用户交互至关重要。 在Flex的DataGrid组件中,我们通常会遇到这样的需求:当用户需要对多条记录进行批量操作时,如...

    在DataGrid中进行复选框的操作(全选和取消)

    2. 编写后台代码,处理全选/取消全选的事件,并同步复选框状态。 3. 实现`SelectionChanged`、`Checked`和`Unchecked`事件,确保数据源与界面状态一致。 通过以上步骤,你可以在`DataGrid`中实现复选框的全选和取消...

Global site tag (gtag.js) - Google Analytics