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>  </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>

Flex DataGrid CheckBox 实现多选

相关文章