Flex ：同时选择DataGrid的行列

 

默认情况下，选择DataGrid的一个单元格时会选择该单元格所在的行(item)，哪怎样才能同时选择该单元格所在的列(column)呢？此文将解答网友提出的这个问题。

下载本实例的源码: /Files/Fooo/CrossSelect.zip

不难看出，我们是通过自定义项目渲染器(itemRenderer)来实现该效果的。首先，我们设置DataGrid的useRollOver样式为false，就取消的默认的鼠标行为。然后我们在该项目渲染器中添加了自定义的鼠标事件，其中MOUSE_OVER和MOUSE_OUT事件实现了鼠标移到和移出单元格时仅改变该单元格背景颜色的功能。其中isItemSelected方法可以确保只有没有选中的项目渲染器才执行鼠标移动效果。MOUSE_DOWN实现了同时选择单元格所在行列的功能。是通过遍历columnIndex属性来实现的。代码很简单，不过要注意：在给项目渲染器绘制与网格中各项相关联的文本背景时，一定要设置background = true，指定文本字段具有背景填充。

当然，你也可以用DataGrid事件来实现类似的功能。

//--------------------

在As类文件中，加载了事件的监听：

public function BackgroundColorRenderer()
        {
            super();
            this.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
            this.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
            this.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
        }

 

若仅需鼠标置上就变色，可以做以下调整，把点击事件的代码拷到MouseOver事件下即可。如：

 

private function overHandler(event:MouseEvent):void
        {
            //var dg:DataGrid = DataGrid(listData.owner);
            //if(!dg.isItemSelected(data))
            //{
            //    this.background = true;
            //    this.backgroundColor = dg.getStyle("rollOverColor");
            //}
            
            this.background = false;
            var dg:DataGrid = DataGrid(listData.owner);
            var color:uint = dg.getStyle("selectionColor");

            for(var i:int = 0; i < dg.columns.length; i++)
            {
                var column:DataGridColumn = dg.columns[i] as DataGridColumn;
                if(i == listData.columnIndex)
                {
                    column.setStyle("backgroundColor", color);
                }
                else
                {
                    column.clearStyle("backgroundColor");
                }
            }
        }