`

Flex 4通过重写DataGridColumn和CheckBox类给DataGrid添加选择列-CheckBoxColumn(全)

阅读更多

http://blog.yotuo.net/post/2009/11/DataGrid-CheckBoxColumn.html

 

最近在尝试着用Flex做个文件按管理的工具,在文件列表中为了操作方便,想到了再列表控件DataGird中添加一个含有复选框的列,在表头的复选框可以实现全选功能,但DataGird自身并无此功能。参照网上的相关资料,总算折腾出来了,现把源码奉上,希望对需要的朋友有点帮助,不足之处也请高手指点。

最终的CheckBoxColumn包包含四个相关的类文件,分别是:

1、CenterCheckBox.as:通过重写CheckBox基类来实现复选框的居中显示;

2、CheckBoxColumn.as:继承自DataGridColumn的一个新类,为了实现需要,增添了几个新属性;

3、CheckBoxHeaderRenderer.as:继承自CenterCheckBox 类,用于DataGrid表头的复选框,实现全选功能;

4、CheckBoxItemRenderer.as:继承自CenterCheckBox 类,用于DataGrid表中的数据行;

各文件源码如下: 
1、CenterCheckBox.as

package Common.YotuoUpload.CheckBoxColumn 
{ 
    import flash.display.DisplayObject;   
    import mx.controls.CheckBox;   
    import flash.text.TextField;   
     
    public class CenterCheckBox extends CheckBox   
    {   
        // 居中展现   
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void   
        {   
            super.updateDisplayList(unscaledWidth, unscaledHeight);   
            var n:int = numChildren;   
            for(var i:int = 0; i < n; i++)   
            {   
                var c:DisplayObject = getChildAt(i);   
                if( !(c is TextField))   
                {   
                    c.x = Math.round((unscaledWidth - c.width) / 2);   
                    c.y = Math.round((unscaledHeight - c.height) /2 );   
                }   
            }   
        }   
    } 
} 

 

2、DataGridColumn.as

package Common.YotuoUpload.CheckBoxColumn 
{ 
    import mx.controls.dataGridClasses.DataGridColumn; 
     
    public class CheckBoxColumn extends DataGridColumn{ 
         
        public var cloumnSelected:Boolean=false;//保存该列是否全选的属性(用户先点击全选后在手动的取消几行数据的选中状态时,这里的状态不会改变)           
         
        public var selectItems:Array = new Array();//用户保存用户选中的数据 
         
     
        public function CheckBoxColumn(columnName:String=null){ 
            super(columnName);  
        } 
    } 
} 

 3、CheckBoxHeaderRenderer.as

package Common.YotuoUpload.CheckBoxColumn 
{ 
    import flash.events.Event; 
     
    import mx.collections.ArrayCollection; 
    import mx.controls.CheckBox; 
    import mx.controls.DataGrid; 
 
    public class CheckBoxHeaderRenderer extends CenterCheckBox{    
         
        private var _data:CheckBoxColumn;//定义CheckBox列对象      
        public function CheckBoxHeaderRenderer(){ 
            super(); 
            this.addEventListener(Event.CHANGE,onChange);//CheckBox状态变化时触发此事件 
            this.toolTip = "全选"; 
        } 
         
         
        override public function get data():Object{ 
            return _data;//返回的是CheckBox列的对象 
             
        } 
         
        override public function set data(value:Object):void{ 
            _data = value as CheckBoxColumn; 
            //trace(_data.cloumnSelected); 
            selected = _data.cloumnSelected; 
        } 
         
        private function onChange(event:Event):void{                 
             
            var dg:DataGrid = DataGrid(listData.owner);//获取DataGrid对象 
            var column:CheckBoxColumn = dg.columns[listData.columnIndex];//获取整列的显示对象 
             
            var dgDataArr:ArrayCollection = dg.dataProvider as  ArrayCollection; 
             
            column.cloumnSelected = this.selected;//更改列的全选状态 
             
            column.selectItems = new Array();//重新初始化用于保存选中列的对象 
             
            if(this.selected){//如果为全部选中的化就将数据源赋值给column.selectItems,不是就不管他,上一步已经初始化为空 
                column.selectItems = (dg.dataProvider as ArrayCollection).toArray(); 
                 
            } 
            if(dgDataArr.length>0){ 
                if(dgDataArr[0]!=""){ 
                    for(var i:int = 0; i < dgDataArr.length ; i++){ 
                        Object(dgDataArr[i]).dgSelected = this.selected;//更改没一行的选中状态 
                    }  
                }   
            }  
            dgDataArr.refresh();//刷新数据源,达到强制更新页面显示效果的功能,防止在使用时没有在VO类中使用绑定而出现点击全选页面没有更改状态的错误       
        } 
    } 
} 

 4、CheckBoxItemRenderer.as

 
package Common.YotuoUpload.CheckBoxColumn 
{ 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import mx.controls.CheckBox; 
    import mx.controls.DataGrid; 
     
    public class CheckBoxItemRenderer extends CenterCheckBox{ 
        private var currentData:Object; //保存当前一行值的对象 
 
        public function CheckBoxItemRenderer(){ 
            super(); 
            this.addEventListener(Event.CHANGE,onClickCheckBox); 
            this.toolTip = "选择"; 
        } 
         
        override public function set data(value:Object):void{ 
            this.selected = value.dgSelected; 
            this.currentData = value; //保存整行的引用 
        } 
         
        //点击check box时,根据状况向selectedItems array中添加当前行的引用,或者从array中移除 
        private function onClickCheckBox(e:Event):void{  
            var dg:DataGrid = DataGrid(listData.owner);//获取DataGrid对象 
            var column:CheckBoxColumn = dg.columns[listData.columnIndex];//获取整列的显示对象 
            var selectItems:Array = column.selectItems; 
            this.currentData.dgSelected = this.selected;//根据是否选中的状态,更改数据源中选中的标记 
            if(this.selected){ 
                selectItems.push(this.currentData); 
            }else{ 
                for(var i:int = 0; i<selectItems.length; i++){ 
                    if(selectItems[i] == this.currentData){ 
                        selectItems.splice(i,1) 
                    } 
                } 
            } 
        } 
    } 
} 
 调用示例:

1、在mxml中作为控件调用:

<?xml version="1.0" encoding="utf-8"?>  
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
               xmlns:s="library://ns.adobe.com/flex/spark"   
               xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" 
               xmlns:CheckBoxColumn="Common.YotuoUpload.CheckBoxColumn.*" 
               creationComplete="Init()">  
    <fx:Script>  
        <![CDATA[  
            import Common.YotuoUpload.CheckBoxColumn.CheckBoxHeaderRenderer;  
            import Common.YotuoUpload.CheckBoxColumn.CheckBoxItemRenderer;  
            import mx.collections.ArrayCollection;  
              
            public var dataArray:ArrayCollection = new ArrayCollection;  
              
            private function Init():void{  
                dataArray.addItem({isSelected:false,name:'Christina Coenraets',phone:'555-219-2270',email:'ccoenraets@fictitious.com'});  
                dataArray.addItem({isSelected:false,name:'Joanne Wall',phone:'555-219-2012',email:'jwall@fictitious.com'});  
                dataArray.addItem({isSelected:false,name:'Maurice Smith',phone:'555-219-2012',email:'maurice@fictitious.com'});  
                dataArray.addItem({isSelected:false,name:'Mary Jones',phone:'555-219-2000',email:'mjones@fictitious.com'});  
                dataArray.addItem({isSelected:false,name:'God Win',phone:'555-219-2005',email:'godwin@fictitious.com'});  
                dgUser.dataProvider = dataArray;  
            }  
        ]]>  
    </fx:Script>  
    <mx:DataGrid id="dgUser" x="10" y="10" width="450" height="200">  
        <mx:columns>  
            <CheckBoxColumn:CheckBoxColumn dataField="isSelected" width="25"    
                                           draggable="false" resizable="false" sortable="false" 
                                           headerRenderer="{new ClassFactory(CheckBoxHeaderRenderer)}" 
                                           itemRenderer="{new ClassFactory(CheckBoxItemRenderer)}" 
                                           />  
            <mx:DataGridColumn headerText="姓名" dataField="name"/>  
            <mx:DataGridColumn headerText="电话" dataField="phone"/>  
            <mx:DataGridColumn headerText="邮件" dataField="email"/>  
        </mx:columns>  
    </mx:DataGrid>  
</s:Application> 

 2、通过代码动态调用:

<?xml version="1.0" encoding="utf-8"?>  
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
               xmlns:s="library://ns.adobe.com/flex/spark"   
               xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" 
               creationComplete="Init()">  
    <fx:Script>  
        <![CDATA[  
            import mx.controls.dataGridClasses.DataGridColumn;  
            import Common.YotuoUpload.CheckBoxColumn.CheckBoxColumn;  
            import Common.YotuoUpload.CheckBoxColumn.CheckBoxHeaderRenderer;  
            import Common.YotuoUpload.CheckBoxColumn.CheckBoxItemRenderer;  
            import mx.collections.ArrayCollection;  
              
            public var dataArray:ArrayCollection = new ArrayCollection;  
              
            private function Init():void{  
                dataArray.addItem({isSelected:false,name:'Christina Coenraets',phone:'555-219-2270',email:'ccoenraets@fictitious.com'});  
                dataArray.addItem({isSelected:false,name:'Joanne Wall',phone:'555-219-2012',email:'jwall@fictitious.com'});  
                dataArray.addItem({isSelected:false,name:'Maurice Smith',phone:'555-219-2012',email:'maurice@fictitious.com'});  
                dataArray.addItem({isSelected:false,name:'Mary Jones',phone:'555-219-2000',email:'mjones@fictitious.com'});  
                dataArray.addItem({isSelected:false,name:'God Win',phone:'555-219-2005',email:'godwin@fictitious.com'});  
                  
                var _checkBoxCloumn:CheckBoxColumn = new CheckBoxColumn();  
                _checkBoxCloumn.dataField = "isSelected";  
                _checkBoxCloumn.headerRenderer = new ClassFactory(CheckBoxHeaderRenderer);  
                _checkBoxCloumn.itemRenderer = new ClassFactory(CheckBoxItemRenderer);  
                _checkBoxCloumn.width = 30;  
                _checkBoxCloumn.sortable = false;  
                _checkBoxCloumn.draggable = false;  
                  
                var _nameColumn:DataGridColumn = new DataGridColumn();  
                _nameColumn.headerText = "姓名";  
                _nameColumn.dataField = "name";  
                  
                var _telColumn:DataGridColumn = new DataGridColumn();  
                _telColumn.headerText = "电话";  
                _telColumn.dataField = "phone";  
                  
                var _emailColumn:DataGridColumn = new DataGridColumn();  
                _emailColumn.headerText = "邮件";  
                _emailColumn.dataField = "email";  
                  
                dgUser.columns = new Array(_checkBoxCloumn,_nameColumn,_telColumn,_emailColumn);  
                dgUser.dataProvider = dataArray;  
            }  
        ]]>  
    </fx:Script>  
    <mx:DataGrid id="dgUser" x="10" y="10" width="450" height="200" />  
</s:Application> 
 PS:该组件要求在数据源中存在属性isSelected(Boolean类型,用来记录当前行是否被选中)属性,这样就限制了程序的通用性,试了很多方法都未很好解决,希望有办法解决的朋友给以指点。

示例运行效果:

分享到:
评论

相关推荐

    Flex Datagrid checkbox实现

    在Flex Datagrid中实现复选框功能,主要是通过添加一个自定义的列renderer来完成。Renderer是Datagrid中的一个小部件,负责渲染每一行或每一列的数据。对于复选框,我们可以创建一个CheckBox类的实例,然后将其设置...

    flex Datagrid checkbox全选

    总结起来,实现Flex Datagrid checkbox全选功能主要涉及自定义数据列、表头渲染器和行渲染器,通过事件监听和状态同步来达到全选的效果。在实际应用中,可能还需要处理部分选中、反选等复杂逻辑,但上述步骤提供了一...

    flex的dataGrid添加复选框(checkBox)

    在实际应用中,我们经常需要在DataGrid的每一行中添加复选框(checkBox),以便用户可以选择一行或多行数据进行操作。这个教程将详细解释如何在Flex的DataGrid中动态添加复选框,并通过一个名为`DataGridDemo`的示例...

    flex datagrid 嵌套checkbox实现全选

    在Flex开发中,数据网格(DataGrid)是用于展示数据集合的强大组件,它允许用户以表格形式查看和操作数据。本示例关注的是在DataGrid中嵌套复选框(Checkbox),并实现全选功能。这在需要用户批量选择或操作数据的...

    flex 映射DataGrid,修改DataGridColumn显示值

    ### Flex中DataGrid某列显示值的自定义与字体颜色更改 #### 一、自定义DataGridColumn显示值 在Flex中,我们可以通过多种方式来定制DataGrid中的DataGridColumn的显示内容,例如更改显示的文本或者根据不同的条件...

    在Flex的DataGrid中使用CheckBox

    ### 在Flex的DataGrid中使用CheckBox #### 一、引言 在Flex应用程序开发中,DataGrid 是一种常用的UI组件,用于展示数据列表,并提供了一系列的功能,如排序、过滤等。有时,为了增加用户交互性或实现特定功能,...

    Flex DataGrid checkBox

    在Flex编程中,DataGrid组件是用于展示数据集的...通过创建自定义列和渲染器,我们可以轻松地实现选中状态的管理,同时支持全选/全不选等高级功能。注意在实现这些功能时,同步数据模型和视图状态以及优化性能是关键。

    DataGrid自定义列标题

    综上所述,通过各种方式我们可以实现DataGrid的自定义列标题,包括文本、样式、交互性和动态调整列宽等特性,以满足不同场景下的需求。在实际项目中,根据具体业务逻辑和界面设计灵活运用这些方法,能够打造出更加...

    flex带复选框的datagrid

    通过自定义`CheckBoxColumn`、`CheckBoxHeader`和`CheckBoxRenderer`三个类,可以有效地在Flex的DataGrid中实现带有复选框列的功能,不仅增强了用户界面的交互性,也提供了更灵活的数据操作方式。这一实现充分展示了...

    flex中Datagride嵌套checkbox

    总之,Flex的DataGrid组件为我们提供了强大的数据展示功能,通过自定义列和事件处理,我们可以轻松地在其中嵌入复选框,实现数据的多选操作。这种技巧在许多数据交互丰富的应用程序中都十分常见。

    flex datagrid 添加按钮

    通过以上步骤,我们就能够在Flex的DataGrid中添加了一个根据内容判断显示的按钮。这个过程涉及了组件定制、数据绑定、条件逻辑和事件处理等多个核心概念,对深入理解Flex的开发非常有帮助。在实际应用中,还可以...

    重写DataGridColumn

    4. **扩展功能**:如果需要添加额外的功能,如编辑时的验证、鼠标悬停效果等,可以在自定义类中添加相应的方法和事件处理。 5. **应用自定义列**:最后,在`DataGrid`控件中使用我们的自定义列类型。在数据绑定时,...

    flex datagrid

    表头定义了 DataGrid 的列和列标题。在 MXML 中,使用 `&lt;mx:columns&gt;` 子标签和 `&lt;mx:DataGridColumn&gt;` 来定义列,比如: ```xml &lt;mx:DataGrid id="DataGrid2" editable="true" width="300" y="30" right="10"&gt; ...

    WPF动态添加行列DATAGRID

    要动态添加列,我们需要使用DataGridColumn对象。例如,如果我们要添加一个字符串类型的列,可以这样做: ```csharp DataGridTextColumn textColumn = new DataGridTextColumn(); textColumn.Header = "列名"; ...

    datagrid动态添加模板列

    4. **添加模板列到DataGrid** - 创建好`TemplateColumn`后,将其添加到`DataGrid`的`Columns`集合中。 - 通常在`Page_Load`事件处理程序中完成此操作,确保只在第一次加载页面时添加(避免在回发时重复添加)。 5...

    Flex_全选或取消DataGrid中的checkbox

    根据给定的信息,本文将详细解释如何在Flex中实现DataGrid中的checkbox全选或取消功能。这涉及到Flex的checkbox管理、事件监听与处理、以及如何使用Cairngorm框架进行模型层更新等内容。 ### 一、理解Flex DataGrid...

    怎样在flex的datagrid中运用checkbox

    在实际应用中,我们经常需要在DataGrid的列中添加复选框(Checkbox),以便用户能够进行多选操作,例如全选和单选。本文将深入探讨如何在Flex的DataGrid中使用复选框,并实现全选和单选功能。 首先,我们需要在...

    Flex使用弹出窗口为DataGrid添加新数据

    综上所述,Flex 3中通过TitleWindow为DataGrid添加新数据的过程包括创建TitleWindow作为弹出对话框,设计表单获取用户输入,处理“添加”按钮的点击事件以将新数据添加到DataGrid的数据源,以及在主应用中触发...

    flex datagrid中数据列合计

    在这个类中,我们可以重写或者添加方法来计算每列的总和,并将结果显示在Footer上。 2. `FooterDataGrid.as` - 这可能是一个定制的`DataGrid`类,包含了对Footer的特殊处理。在这个类中,可能会有代码用于集成...

    FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc

    在Flex4中,`DataGrid`的列可以通过动态创建来适应变化的数据结构,这在处理不确定列数或列类型的应用场景中非常有用。 在描述中提到,数据可能是数组类型,列名和列个数都是动态的。这意味着在运行时,我们需要...

Global site tag (gtag.js) - Google Analytics