`

flex checkbox tree

阅读更多
网上遇到很多需要在Tree控件添加CheckBox等控件的问题, 本以为把Tree的itemRenderer设置成mx.controls.CheckBox 就可以完事了, 但是试了之后才发现没有这么简单 . . .
      今天看了Tree的源码, Tree在初始化的时候默认给自己设置itemRenderer属性. 此属性值也是Flex现成的:mx.controls.treeClasses.TreeItemRenderer.
      它内部分为三部分:1,icon也是就三角形的小图标. 2,disclosureIcon文件夹图标. 3,label显示的文字. 我只要在label前面加上一个CheckBox就行了.
       于是我写了一个类:TreeCheckBoxRenderer继承mx.controls.treeClasses.TreeItemRenderer源码如下:

package com.montage.controls.treeClasses
{
import flash.events.Event;

import mx.controls.CheckBox;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;

/**
 * 支持CheckBox的TreeItemRenderer
 * @author Montage
 */	
public class TreeCheckBoxRenderer extends TreeItemRenderer
{
	public function TreeCheckBoxRenderer()
	{
		super();
	}
	
	/**
	 * 表示CheckBox控件从data中所取数据的字段
	 */		
	private var _selectedField:String = "selected";
	
	protected var checkBox:CheckBox;
	
	/**
	 * 构建CheckBox
	 */		
	override protected function createChildren():void
	{
		super.createChildren();
		checkBox = new CheckBox();
		addChild( checkBox );
		checkBox.addEventListener(Event.CHANGE, changeHandler);
	}
	
	/**
	 * 点击checkbox时,更新dataProvider
	 * @param event
	 */		
	protected function changeHandler( event:Event ):void
	{
		if( data && data[_selectedField] != undefined )
		{
			data[_selectedField] = checkBox.selected;
		}
	} 
	
	/**
	 * 初始化控件时, 给checkbox赋值
	 */		
	override protected function commitProperties():void
	{
		super.commitProperties();
		trace(data[_selectedField])
		if( data && data[_selectedField] != undefined )
		{
			checkBox.selected = data[_selectedField];
		}
		else
		{
			checkBox.selected = false;
		}
	}
	
	/**
	 * 重置itemRenderer的宽度
	 */		
	override protected function measure():void
	{
		super.measure();
		measuredWidth += checkBox.getExplicitOrMeasuredWidth();
	}
	
	/**
	 * 重新排列位置, 将label后移
	 * @param unscaledWidth
	 * @param unscaledHeight
	 */		
	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
	{
		super.updateDisplayList(unscaledWidth, unscaledHeight);
		var startx:Number = data ? TreeListData( listData ).indent : 0;
		
		if (disclosureIcon)
		{
			disclosureIcon.x = startx;

			startx = disclosureIcon.x + disclosureIcon.width;
			
			disclosureIcon.setActualSize(disclosureIcon.width,
										 disclosureIcon.height);
			
			disclosureIcon.visible = data ?
									 TreeListData( listData ).hasChildren :
									 false;
		}
		
		if (icon)
		{
			icon.x = startx;
			startx = icon.x + icon.measuredWidth;
			icon.setActualSize(icon.measuredWidth, icon.measuredHeight);
		}
		
		checkBox.move(startx, ( unscaledHeight - checkBox.height ) / 2 );
		
		label.x = startx + checkBox.getExplicitOrMeasuredWidth();
	}
}
}

测试文件如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			public var collection:ArrayCollection = new ArrayCollection([
				{ "name" : "上海", "selected":false, "children":[
					{ "name":"黄浦", "selected":false },
					{ "name":"浦东", "selected":true },
					{ "name":"静安", "selected":false },
					{ "name":"徐汇", "selected":false }
				]},
				{ "name":"北京", "selected":false, "children":[
					{ "name":"海淀", "selected":false },
					{ "name":"朝阳", "selected":true },
					{ "name":"丰台", "selected":false }
				]}
			]);
			
		]]>
	</mx:Script>
	<mx:Tree width="300" height="500" labelField="name" 
itemRenderer="com.montage.controls.treeClasses.TreeCheckBoxRenderer" dataProvider="{collection}"/>
</mx:Application>


      注意:selected属性很重要, 此属性在数据源内, 标致当前节点的CheckBox是否选中.点击CheckBox会自动改变响应的数据源.  如果想知道哪些被选中的话, 就遍历Tree的dataProvider吧~
      谨以此文贡献给战斗在RIA第一线的兄弟姐妹们.
分享到:
评论
1 楼 风雨故都 2011-11-04  
怎么获取选中的值?

相关推荐

    flex带复选框的tree,flex checkboxtree

    在Flex中,Tree组件是用于显示层次结构数据的控件,而"flex带复选框的tree"(Flex CheckboxTree)则是对Tree组件的一种扩展,增加了复选框功能,用户可以对树形结构的节点进行选择或全选操作,常用于权限管理、配置...

    flex checkboxtree复选树形下拉框

    在Flex开发中,"flex checkboxtree复选树形下拉框"是一种常见的用户界面组件,它结合了树形结构和复选框的功能,允许用户在层次结构中进行多选操作。这种组件通常用于数据筛选、配置设置或者层级分类的选择场景。在...

    flex checkboxtree 和可增加面板,可关闭的tab页

    `CheckboxTree`和可添加/关闭的`TabPanel`是Flex中常见的组件,用于提供用户友好的交互界面。这篇博客文章《flex checkboxtree 和可增加面板,可关闭的tab页》可能详细讲解了如何在Flex应用中实现这两个功能。 `...

    Flex Checkbox Tree

    在这个文件中,开发者可能创建了一个`CheckBoxTree`实例,指定了数据源,并绑定了相应的事件处理函数,如`itemClick`或`nodeCheckChange`。同时,MXML文件通常也会包含界面布局和样式设置。 综上所述,`Flex ...

    CheckBoxTree.zip

    在Flex开发中,CheckBoxTree是一种常用的UI组件,它结合了树形结构和复选框功能,使得用户可以方便地对树节点进行多选操作。在本文中,我们将深入探讨如何在Flex中实现CheckBoxTree,以及相关的关键技术点。 首先,...

    Flex Tree 中Checkbox

    在“Flex Tree 中Checkbox”的场景下,我们主要讨论如何在Flex Tree组件中集成Checkbox,以及如何通过Checkbox来获取用户的选中状态。 1. **Flex Tree组件**:Flex Tree是MXML和ActionScript中的一个控件,用于显示...

    flex tree+checkbox级联勾选

    "Flex Tree + Checkbox级联勾选"是一个重要的功能点,通常出现在数据管理、配置界面或文件管理系统中,允许用户进行批量选择或级联操作。 首先,我们来详细了解一下Flex Tree。Flex Tree是基于Adobe Flex技术的一种...

    构造flex3.5的带复选框的树(CheckBoxTree)

    在Flex 3.5开发中,我们经常遇到需要创建具有交互性和可视复杂性的用户界面,其中一个常见的需求就是构建一个带有复选框的树形结构,也就是所谓的“复选框树”(CheckBoxTree)。这样的控件允许用户通过复选框来选择或...

    flex中tree和checkbox结合使用的插件

    在Flex开发中,Tree组件和Checkbox控件的结合使用是一个常见的需求,特别是在构建具有层级结构并需要用户进行多选操作的界面时。本插件专为此目的设计,它允许用户在树形结构中通过复选框来选择或取消选择节点,从而...

    flex 带有checkbox的tree

    这个是带有checkbox的tree,下载即可使用哦。

    flex Tree checkbox 修改过后的

    标题提到的“flex Tree checkbox 修改过后”,意味着原生的Flex Tree控件已经进行了自定义修改,以适应带有复选框功能的需求。 在Flex中实现Tree与Checkbox结合的关键点包括: 1. **创建自定义TreeItemRenderer**...

    flex Tree 复选框。

    在Flex编程环境中,Tree组件是一种常用的用户界面元素,它用于展示层次结构的数据。在这个特定的场景中,我们关注的是在Flex Tree中集成复选框功能,这为用户提供了一种直观的方式来选择或操作树形结构中的多个节点...

    flex 中tree渲染checkbox

    在Flex编程环境中,Tree组件是一种常用的用户界面元素,用于展示层次结构的数据。当我们需要在树形结构中添加复选框(checkbox)功能时,可以实现用户对多项选择的操作,这在数据筛选、配置设置等场景中非常常见。...

    Flex4的Tree控件加CheckBox

    在这个场景中,我们关注的是如何在Flex4的Tree控件中添加CheckBox,以便用户可以多选树形结构中的节点。 Tree控件在Flex中用于展示层次结构的数据,它允许用户展开和折叠节点,查看和导航数据结构。在很多情况下,...

    CheckBoxTree

    CheckBoxTree是一种在图形用户界面(GUI)中常用于数据组织和选择的组件,尤其在Flex框架下非常常见。它结合了复选框(CheckBox)和树形结构(Tree),允许用户以层次化的方式查看和选择数据项。在给定的上下文中,...

    Flex tree+checkbox可实现级联勾选 修改

    flex tree+checkbox可实现级联勾选 修改后 修改CheckTreeDemoRenderer.as这个文件中 while (!cursor.afterLast){ if (cursor.current.@state == STATE_CHECKED) { noChecks++; }else if (cursor.current.@state =...

    flex tree checkbox

    而当我们谈论"flex tree checkbox"时,这意味着我们要在Tree组件的节点上添加复选框,使得用户可以对每个节点进行多选操作,提高交互性和用户体验。 首先,让我们深入了解Flex Tree组件。Tree组件是基于Adobe Flex ...

    flex tree 中渲染checkBox

    本文将深入探讨如何在Flex Tree组件中渲染CheckBox,这在创建具有交互性和选择功能的树状视图时非常有用。通过学习这个主题,开发者可以提升其在Flex应用程序中的用户界面设计能力。 `flex tree 中渲染checkBox`这...

Global site tag (gtag.js) - Google Analytics