Flex DataGrid CheckBox 实现多选

涉及到4个相关的类，先列举如下：

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

2、CheckBoxColumn.as：继承自DataGridColumn的一个新类，为了实现需要，增添了两个属性；

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

4、CheckBoxItemRenderer.as：继承自CenterCheckBox 类，用于DataGrid表中的数据行

一、CenterCheckBox.as

package components
{
    import flash.display.DisplayObject;
    import flash.text.TextField;
   
    import mx.controls.CheckBox;
   
    public class CenterCheckBox extends CheckBox
    {
       
        //使复选框剧中显示
        override protected function updateDisplayList(width:Number, height:Number):void
        {
            super.updateDisplayList(width,height);
            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((width - c.width) / 2);
                    c.y = Math.round((height - c.height) / 2);
                }
            }
        }
    }
}

二、CheckBoxColumn.as

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

三、CheckBoxHeaderRenderer.as

package components
{
    import flash.events.Event;
   
    import mx.collections.ArrayCollection;
    import mx.controls.DataGrid;

    public class CheckBoxHeaderRenderer extends CenterCheckBox
    {
        private var _data:CheckBoxColumn;//定义CheckBox列对象
        public function CheckBoxHeaderRenderer()
        {
            super();
            this.addEventListener(Event.CHANGE,onChange);
            this.toolTip = "全选";
        }
       
        override public function get data():Object
        {
            return _data;
        }
       
        override public function set data(value:Object):void
        {
            _data = value as CheckBoxColumn;
            this.selected = _data.columnSelected;
        }
       
        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.columnSelected = this.selected;//更改列的全选状态
            column.selectedItems = new Array();//重新初始化用于保存选中列的对象
            if(this.selected)
            {
                //如果为全部选中的化就将数据源赋值给column.selectItems，不是就不管他，上一步已经初始化为空
                column.selectedItems = (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类中使用绑定而出现点击全选页面没有更改状态的错误      
            }
        }
    }
}

四、CheckBoxItemRenderer.as

 

package components
{
    import flash.events.Event;
   
    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.selectedItems;
            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);
                    }
                }
            }
        }
    }
}

 

五、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/mx"
               xmlns:comp="components.*" minWidth="955" minHeight="600" creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import components.CheckBoxHeaderRenderer;
            import components.CheckBoxItemRenderer;
            import components.SequenceItemRenderer;
            import mx.controls.Alert;
            private var _indexRenderer:Class = SequenceItemRenderer;
           
            private function init():void{ 
                var array:Array = []; 
                for(var i:int = 1; i <= 10; i++){ 
                    array.push({name:"name"+i.toString()}); 
                } 
                grid.dataProvider = array; 
            } 
            private function commit():void
            {
                Alert.show(checkbox.selectedItems.length+"");
            }
        ]]>
    </fx:Script>
    <mx:DataGrid id="grid"> 
        <mx:columns> 
            <comp:CheckBoxColumn id="checkbox" dataField="isSelected" width="25"   
                                 draggable="false" resizable="false" sortable="false"
                                  headerRenderer="{new ClassFactory(components.CheckBoxHeaderRenderer)}"
                                  itemRenderer="{new ClassFactory(components.CheckBoxItemRenderer)}"/>
            <mx:DataGridColumn headerText="no" itemRenderer="{new ClassFactory(_indexRenderer)}"/> 
            <mx:DataGridColumn headerText="name" dataField="name"/> 
        </mx:columns> 
    </mx:DataGrid> 
    <s:Button label="提交" click="commit()"/>
</s:Application>

评论

6 楼 comdevlihun 2014-02-12  

里面有个大大的Bug，当全选之后，单击一行数据使其成为未选中状态，但是列头的状态还是选中状态……

5 楼 niweiwei 2013-10-29  

link_jack 写道

我感觉CheckBoxColumn这个类的重写没必要，一方面重新开辟内存存储选中数据，浪费了资源。另一方面封装的角度来讲，针对于datagrid 来说  要获取选择数据却要从datagrid一个列中获取，破环了封装性，同时程序也显示的混乱，既然同时也在数据源中添加了字段记录选择状态，为什么不直接在数据源中获取呢？

这个是以前写的关于flex的东西，我也好久没有看flex了，如果兄弟你觉得你的方案好，可以拿出来分享，大家学习下

4 楼 link_jack 2013-06-05  

我感觉CheckBoxColumn这个类的重写没必要，一方面重新开辟内存存储选中数据，浪费了资源。另一方面封装的角度来讲，针对于datagrid 来说  要获取选择数据却要从datagrid一个列中获取，破环了封装性，同时程序也显示的混乱，既然同时也在数据源中添加了字段记录选择状态，为什么不直接在数据源中获取呢？

3 楼 tengji900 2011-11-18  

SequenceItemRenderer
是不是你没上传啊

2 楼 niweiwei 2011-09-15  

估计是你的CheckBoxColumn这个类没有定义吧

1 楼 tengji900 2011-09-01  

private var _indexRenderer:Class = SequenceItemRenderer;
异常 本人给删除了


<comp:CheckBoxColumn id="checkbox" dataField="isSelected" width="25"   
                                 draggable="false" resizable="false" sortable="false"
                                  headerRenderer="{new ClassFactory(components.CheckBoxHeaderRenderer)}"
                                  itemRenderer="{new ClassFactory(components.CheckBoxItemRenderer)}"/>


MyEclipse报如下异常

此行的多个标记:
-CheckBoxColumn
-1046: 找不到类型，或者它不是编译时常数: CheckBoxColumn。

求解