flex AdvancedDataGrid实现checkbox全选 -

zengxiangshun

浏览: 56697 次
性别:
来自: 深圳

最近访客更多访客>>

wd1282988143

shun35

jacky_X

剪刀布石头

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

flex AdvancedDataGrid实现checkbox全选

博客分类：

Flex4专栏

HTML Flash Flex Adobe

还有几个好的例子的地址：http://www.ityangba.com/thread-126-1-1.html，可以与下面的对比参照。
--------------------------------------------------------------------

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 checkBox.test
{
	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.CheckBoxColumn.as

package checkBox.test
{
	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 checkBox.test
{
	import flash.events.Event;
	
	import mx.collections.ArrayCollection;
	import mx.controls.DataGrid; 
	import checkBox.test.CenterCheckBox;  
	import checkBox.test.CheckBoxHeaderRenderer;  
    import checkBox.test.CheckBoxItemRenderer;  
	import checkBox.test.CheckBoxColumn;  
 
    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 checkBox.test
{
	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"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	creationComplete="Init()" horizontalAlign="center"
	xmlns:CheckBoxColumn ="checkBox.test.*" >
    <mx:Script>  
        <![CDATA[  
            import checkBox.test.CenterCheckBox;  
            import checkBox.test.CheckBoxHeaderRenderer;  
            import checkBox.test.CheckBoxItemRenderer;  
            import checkBox.test.CheckBoxColumn;  
            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;  
            }  
        ]]>  
    </mx: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)}">
				</CheckBoxColumn:CheckBoxColumn>
            <mx:DataGridColumn headerText="姓名" dataField="name"/>  
            <mx:DataGridColumn headerText="电话" dataField="phone"/>  
            <mx:DataGridColumn headerText="邮件" dataField="email"/>  
        </mx:columns>  
    </mx:DataGrid>  
</mx: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类型，用来记录当前行是否被选中）属性，这样就限制了程序的通用性，试了很多方法都未很好解决，希望有办法解决的朋友给以指点。
示例运行效果：

查看图片附件

分享到：

ArcGIS API for Flex 源码实例 | js动态添加表格

2011-07-17 00:14
浏览 3161
评论(3)
分类:编程语言
查看更多

3 楼 ttianyaren 2013-10-09

你的AdvancedDataGrid呢，不要到处抄连代码都不看还说自己倒腾的

2 楼 zengxiangshun 2012-03-01

star245 写道

怎么取得选中的复选框的值哦，新手求教中，，，，

for(var i:int=0; i<customerModel.managersPage.pageData.length; i++)
{
if(customerModel.managersPage.pageData[i].dgSelected.toString()=="true"){
var userV:UserVO = new UserVO();
userV.userId = customerModel.managersPage.pageData[i].userId;
result.push(userV);
}
}
customerModel.managerNewAdds = result;
你看看这个代码应该明白了 if里面就是取你选择的值

1 楼 star245 2012-02-18

怎么取得选中的复选框的值哦，新手求教中，，，，

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

flex AdvancedDataGrid实现checkbox全选

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

flex AdvancedDataGrid实现checkbox全选

评论

发表评论

相关推荐

flex 左右左右选择器

Flex报表学习网站

Flex实例一(实现左右多选框的拖拽、点击选择，双击选择，左右互选)

flex控件的学习网站（收藏）

Flex学习网站

牛人写的50行俄罗斯方块代码（附带声音）

Flex3与Flex4的区别

Flex的MVC框架结构-Cairngorm

Flex的MVC框架结构-Cairngorm

Flex4之DataGrid增删改同步数据库及页面数据示例总结

EventDispatcher类详解

最近访客更多访客>>