`

FLEX中带复选框的DataGrid

    博客分类:
  • FLEX
阅读更多

1.主文件

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- http://www.myflexhero.com/share/flex3-mx/flex-mx-core-components/flex-mx-ui-controls/flex-mx-tree-and-datagrid-controls/604  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				xmlns:local="com.future.component.*"
				height="500" verticalGap="0" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private var arr:Array = [
										{label:"未下发工单",value:"1"},
										{label:"已处理工单",value:"2"},
										{label:"已关闭工单",value:"3"},
										];
			
			private function selectInfo():void{
				for each(var obj:Object in dg.selectedItems){
					Alert.show(obj.value);
				}
			}
 
		]]>
	</mx:Script>
	<local:CheckBoxDataGrid id="dg" dataProvider="{arr}" horizontalScrollPolicy="on" allowMultipleSelection="true">
		<local:columns>
			<mx:DataGridColumn width="20" sortable="false" itemRenderer="com.future.component.CheckBoxRenderer" headerRenderer="com.future.component.CheckBoxHeaderRenderer"/> 
			<mx:DataGridColumn dataField="label" headerText="类型" />
		</local:columns>
	</local:CheckBoxDataGrid>
	<mx:Button label="显示信息" click="{selectInfo()}"/>
</mx:Application>

 2.CheckBoxDataGrid.as

package com.future.component
{
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
import mx.controls.listClasses.IListItemRenderer;
 
/** 
 *  DataGrid that uses checkboxes for multiple selection
 */
public class CheckBoxDataGrid extends DataGrid{
 
	override protected function selectItem(item:IListItemRenderer,
                                  shiftKey:Boolean, ctrlKey:Boolean,
                                  transition:Boolean = true):Boolean{
		// only run selection code if a checkbox was hit and always
		// pretend we're using ctrl selection
		if (item is CheckBox)
			return super.selectItem(item, false, true, transition);
		return false;
	}
 
	// turn off selection indicator
    override protected function drawSelectionIndicator(
                                indicator:Sprite, x:Number, y:Number,
                                width:Number, height:Number, color:uint,
                                itemRenderer:IListItemRenderer):void{
	}
 
	// whenever we draw the renderer, make sure we re-eval the checked state
    override protected function drawItem(item:IListItemRenderer,
                                selected:Boolean = false,
                                highlighted:Boolean = false,
                                caret:Boolean = false,
                                transition:Boolean = false):void{
		if (item is CheckBox)
            CheckBox(item).invalidateProperties();
		super.drawItem(item, selected, highlighted, caret, transition);
	}
 
	// fake all keyboard interaction as if it had the ctrl key down
	override protected function keyDownHandler(event:KeyboardEvent):void{
		// this is technically illegal, but works
		event.ctrlKey = true;
		event.shiftKey = false;
		super.keyDownHandler(event);
	}
 
}
}

 3.CheckBoxHeaderRenderer.as

package com.future.component
{
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.ListBase;
 
/** 
 *  The Renderer.
 */
public class CheckBoxHeaderRenderer extends CheckBox{
 
	public function CheckBoxHeaderRenderer(){
		focusEnabled = false;
	}
 
	override public function set data(value:Object):void{
		invalidateProperties();
	}
 
    private var addedListener:Boolean = false;
    private var partiallySelected:Boolean = false;
 
	override protected function commitProperties():void{
		super.commitProperties();
		if (owner is ListBase){
            if (!addedListener){
                addedListener = true;
                owner.addEventListener("valueCommit", owner_changeHandler, false, 0, true);
                owner.addEventListener("change", owner_changeHandler, false, 0, true);
            }
 
            if (ListBase(owner).dataProvider.length == 
                ListBase(owner).selectedItems.length){
			    selected = true;
                partiallySelected = false;
            }
            else if (ListBase(owner).selectedItems.length == 0){
                selected = false;
                partiallySelected = false;
            } else{
                selected = false;
                partiallySelected = true;
            }
            invalidateDisplayList();
        }
	}
 
	/* eat keyboard events, the underlying list will handle them */
	override protected function keyDownHandler(event:KeyboardEvent):void{
	}
 
	/* eat keyboard events, the underlying list will handle them */
	override protected function keyUpHandler(event:KeyboardEvent):void{
	}
 
	override protected function clickHandler(event:MouseEvent):void{
        if (selected){
            // uncheck everything
            ListBase(owner).selectedIndex = -1;
        }else{
            var n:int = ListBase(owner).dataProvider.length;
            var arr:Array = [];
            for (var i:int = i; i < n; i++)
                arr.push(i);
            ListBase(owner).selectedIndices = arr;
        }
	}
 
	/* center the checkbox if we're in a datagrid */
	override protected function updateDisplayList(w:Number, h:Number):void{
		super.updateDisplayList(w, h);
 
        graphics.clear();
 
		if (listData is DataGridListData){
			var n:int = numChildren;
			for (var i:int = 0; i < n; i++){
				var c:DisplayObject = getChildAt(i);
				if (!(c is TextField)){
					c.x = (w - c.width) / 2;
					c.y = 0;
                    c.alpha = 1;
                    if (partiallySelected){
                        graphics.beginFill(0x000000);
                        graphics.drawRect(c.x, c.y, c.width, c.height);
                        graphics.endFill();
                        c.alpha = 0.7;
                    }
				}
			}
		}
	}
 
    private function owner_changeHandler(event:Event):void{
        invalidateProperties();
    }
}
}

 4.CheckBoxRenderer.as

package com.future.component
{
import flash.display.DisplayObject;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.ListBase;
 
/** 
 *  The Renderer.
 */
public class CheckBoxRenderer extends CheckBox
{
 
	public function CheckBoxRenderer(){
		focusEnabled = false;
	}
 
	override public function set data(value:Object):void{
		super.data = value;
		invalidateProperties();
	}
 
	override protected function commitProperties():void{
		super.commitProperties();
		if (owner is ListBase)
			selected = ListBase(owner).isItemSelected(data);
	}
 
	/* eat keyboard events, the underlying list will handle them */
	override protected function keyDownHandler(event:KeyboardEvent):void{
	}
 
	/* eat keyboard events, the underlying list will handle them */
	override protected function keyUpHandler(event:KeyboardEvent):void{
	}
 
	/* eat mouse events, the underlying list will handle them */
	override protected function clickHandler(event:MouseEvent):void{
	}
 
	/* center the checkbox if we're in a datagrid */
	override protected function updateDisplayList(w:Number, h:Number):void{
		super.updateDisplayList(w, h);
 
		if (listData is DataGridListData){
			var n:int = numChildren;
			for (var i:int = 0; i < n; i++){
				var c:DisplayObject = getChildAt(i);
				if (!(c is TextField)){
					c.x = (w - c.width) / 2;
					c.y = 0;
				}
			}
		}
	}
 
}
}
分享到:
评论

相关推荐

    flex带复选框的datagrid

    根据给定的文件信息,我们可以总结出关于Flex中带复选框的DataGrid的知识点,主要涉及Flex框架下的DataGrid组件及其自定义扩展,具体包括CheckBoxColumn、CheckBoxHeader和CheckBoxRenderer这三个类的设计与实现。...

    flex DataGrid复选框源码

    本资源包含的是关于在DataGrid中实现复选框功能的源代码,这对于需要在表格中进行多选操作的应用非常有用。 首先,我们来看`CheckBoxHeaderRenderer.as`,这个文件是DataGrid列头的自定义渲染器。在Flex中,渲染器...

    flex的dataGrid添加复选框(checkBox)

    这个教程将详细解释如何在Flex的DataGrid中动态添加复选框,并通过一个名为`DataGridDemo`的示例项目来演示这一过程。 首先,我们需要了解Flex中的DataGrid组件。DataGrid是基于MX组件库的一个控件,它能够与数据...

    FLEX AdvancedDataGrid 复选框

    本文将深入探讨“FLEX AdvancedDataGrid 复选框”这一主题,主要基于提供的文件`AdvancedDataGridGroupItemRendererEx.as`。 在AdvancedDataGrid中,复选框的使用通常是为用户提供一种多选数据项的交互方式。复选框...

    flex-带checkbox的datagrid

    标题"flex-带checkbox的datagrid"指的是在Flex Datagrid组件中集成复选框(checkbox)的功能。这种功能常用于多选操作,例如用户可以选择一组数据项进行批量删除、编辑或其他操作。下面将详细介绍如何在Flex中实现带...

    Flex dataGrid 全选、反选

    本文将详细讨论如何在Flex DataGrid中实现全选和反选功能,并结合`checkBox`来优化这一过程。 首先,我们要理解DataGrid的结构。DataGrid由多个列组成,每一列可能包含不同类型的控件,如文本、图像或复选框。在...

    flex datagrid 嵌套checkbox实现全选

    在Flex开发中,数据网格...总结,这个Flex3示例展示了如何在DataGrid中嵌套复选框并实现全选功能,这对于构建交互式的数据管理界面至关重要。通过学习和实践,开发者可以创建更灵活、用户友好的数据操作界面。

    flex datagrid 标题栏添加 checkbox 和 数据行 checkbox 连动

    总的来说,实现Flex DataGrid标题栏添加复选框并使其与数据行的复选框联动,涉及到自定义HeaderRenderer和CellRenderer,以及对数据源和事件处理的深入理解。这需要开发者具备良好的Flex编程基础和组件定制能力。...

    Flex的DataGrid中使用CheckBox

    Flex的DataGrid中使用CheckBox. 大家共同研究

    Flex Datagrid checkbox实现

    在标题“Flex Datagrid checkbox实现”中,讨论的核心是Datagrid中集成复选框(checkbox)的功能。 在Flex Datagrid中实现复选框功能,主要是通过添加一个自定义的列renderer来完成。Renderer是Datagrid中的一个小...

    flex 三状态多选 自动分页DataGrid

    - 用户可以通过复选框或者选中行的样式来表示三种状态:未选(灰色)、已选(蓝色)和半选(部分选中,如子项中部分被选中)。半选状态常用于层次结构数据的场景,例如部分子项被选中,父项显示为半选。 - 数据...

    flex datagrid checkbox实现源码

    "flex datagrid checkbox实现源码"这个主题就是关于如何在Flex DataGrid中集成并正确管理复选框功能的。 1. **Flex DataGrid基础** Flex DataGrid是Adobe Flex框架中的一种组件,用于显示和编辑大量结构化的数据。...

    flex中dataGrid全选和全不选功能

    在DataGrid中添加一个列用于显示复选框,用于单行的选择。这里我们使用`AdvancedDataGridColumn`,并设置`sortable`为`false`,因为选择列通常不需要排序功能。同时,我们指定了`headerRenderer`和`itemRenderer`,...

    带复选框的树状ComboBox

    在Flex编程环境中,"带复选框的树状ComboBox"是一种高级UI组件,它结合了树形结构和下拉框的功能,并且每个节点都配备有复选框,为用户提供了一种方便的方式来多选树状数据。这样的组件在数据筛选、配置设置等场景中...

    flex中Datagride嵌套checkbox

    本文将详细介绍如何在Flex的DataGrid中实现复选框的嵌套,并提供一个实用的AS代码示例。 首先,我们需要了解Flex的DataGrid组件。DataGrid是ActionScript 3和Flex框架中的一个控件,它允许我们以表格的形式展示数据...

    flex在DataGrid中实现checkbox全选或取消

    本文将深入探讨如何在Flex中的DataGrid组件中实现复选框的全选与取消全选功能,这对于数据操作和用户交互至关重要。 在Flex的DataGrid组件中,我们通常会遇到这样的需求:当用户需要对多条记录进行批量操作时,如...

    Flex-DataGrid源码及资料

    3. 插入复选框控件:在DataGrid中插入复选框可以方便用户进行多项选择。通常,我们需要自定义一个数据列类,比如CheckBoxGridColumn,继承自GridColumn,并在renderFunction中创建并返回一个CheckBox对象。同时,...

    FLEX的一个DataGrid例子

    DataGrid还支持行选择、多选、复选框、拖放等功能,可以根据项目需求进行配置。 在“Customer_DataGrid”这个例子中,很可能是展示了如何用DataGrid来显示客户数据,包括姓名和年龄等字段。通过这个实例,开发者...

    flex datagrid插入多列Checkbox应用实例

    本实例即展示了如何在Flex DataGrid中实现多列复选框的功能,同时避免了常见的拖动滚动条导致的混乱问题。 首先,我们需要创建一个自定义的CellRenderer,这个CellRenderer将负责在每个单元格中显示复选框。在...

    怎样在flex的datagrid中运用checkbox

    本文将深入探讨如何在Flex的DataGrid中使用复选框,并实现全选和单选功能。 首先,我们需要在DataGrid的列定义中添加一个CheckBox组件。在MXML中,你可以通过以下方式创建一个包含复选框的列: ```xml 选择"&gt; ...

Global site tag (gtag.js) - Google Analytics