`
牧羊人
  • 浏览: 213559 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

带CheckBox和级联操作的Tree

    博客分类:
  • flex
阅读更多
CSDN上下载的,该Tree是采用XMLList 绑定数据的

CheckTreeDemoRenderer.as
package com.render
{
	import flash.events.MouseEvent;
	import flash.xml.*;
	
	import mx.collections.*;
	import mx.controls.CheckBox;
	import mx.controls.Image;
	import mx.controls.Tree;
	import mx.controls.listClasses.*;
	import mx.controls.treeClasses.*;
	public class CheckTreeDemoRenderer extends TreeItemRenderer
	{
        protected var myImage:Image;
        
        
        private var imageWidth:Number 	= 6;
	    private var imageHeight:Number 	= 6;
        private var inner:String 	= "com/assets/inner.png";
		protected var myCheckBox:CheckBox;
		static private var STATE_SCHRODINGER:String = "schrodinger";
		static private var STATE_CHECKED:String = "checked";
		static private var STATE_UNCHECKED:String = "unchecked";
	    
        public function CheckTreeDemoRenderer () 
		{
			super();
			mouseEnabled = false;
		}
		
		override protected function createChildren():void
		{
			super.createChildren();
			myCheckBox = new CheckBox();
			myCheckBox.setStyle( "verticalAlign", "middle" );
			myCheckBox.addEventListener( MouseEvent.CLICK, checkBoxToggleHandler );
			addChild(myCheckBox);
			myImage = new Image();
	    	myImage.source = inner;
			myImage.addEventListener( MouseEvent.CLICK, imageToggleHandler );
			myImage.setStyle( "verticalAlign", "middle" );
			addChild(myImage);
			
	    }	
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
	   	{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
	        if(super.data)
	        {
			    if (super.icon != null)
			    {
				    myCheckBox.x = super.icon.x;
				    myCheckBox.y = super.icon.y;
				    myCheckBox.width = super.icon.width;
				    myCheckBox.height = super.icon.height;
				    super.icon.x = myCheckBox.x + myCheckBox.width ;
				    super.label.x = super.icon.x + super.icon.width;
				}
				else
			    {
				    myCheckBox.x = super.label.x;
				    myCheckBox.y =  super.label.y;
				    myCheckBox.height = super.label.height;
				    super.label.x = myCheckBox.x + myCheckBox.width + myCheckBox.height;
				}
			    if (data.@state == STATE_SCHRODINGER)
			    {
			    	myImage.x = myCheckBox.x + 4;
			    	myImage.y = myCheckBox.y + 4;
					myImage.width = imageWidth;
					myImage.height = imageHeight;
			    }
			    else
			    {
			    	myImage.x = 0;
			    	myImage.y = 0;
					myImage.width = 0;
					myImage.height = 0;
			    }
			}
	    }
		
		override public function set data(value:Object):void
		{
			super.data = value;
			
			setCheckState (myCheckBox, value, value.@state);
			if(TreeListData(super.listData).item.@type == 'dimension')
			{
			    setStyle("fontStyle", 'italic');
			}
			else
			{
				if (this.parent != null)
				{
					var _tree:Tree = Tree(this.parent.parent);
		    		_tree.setStyle("defaultLeafIcon", null);
		  		}
				setStyle("fontStyle", 'normal');
			}
	    }
		
		private function toggleParents (item:Object, tree:Tree, state:String):void
		{
			if (item == null)
			{
				return;
			}
			else
			{
				item.@state = state;
				toggleParents(tree.getParentItem(item), tree, getState (tree, tree.getParentItem(item)));
			}
		}
		
		private function toggleChildren (item:Object, tree:Tree, state:String):void
		{
			if (item == null)
			{
				return;
			}
			else
			{
				item.@state = state;
				var treeData:ITreeDataDescriptor = tree.dataDescriptor;
				if (treeData.hasChildren(item))
				{
					var children:ICollectionView = treeData.getChildren (item);
					var cursor:IViewCursor = children.createCursor();
					while (!cursor.afterLast)
					{
						toggleChildren(cursor.current, tree, state);
						cursor.moveNext();
					}
				}
			}
		}
		
		private function getState(tree:Tree, parent:Object):String
		{
//			Alert.show("1");
			var noChecks:int = 0;
			var noCats:int = 0;
			var noUnChecks:int = 0;
			if (parent != null)
			{
				var treeData:ITreeDataDescriptor = tree.dataDescriptor;
				var cursor:IViewCursor = treeData.getChildren(parent).createCursor();
				while (!cursor.afterLast)
				{
					if (cursor.current.@state == STATE_CHECKED)
					{
						noChecks++;
					}
					else if (cursor.current.@state == STATE_UNCHECKED)
					{
						noUnChecks++
					}
					else
					{
						noCats++;
					}
					cursor.moveNext();
				}
			}
			if ((noChecks > 0 && noUnChecks > 0) || (noCats > 0))
			{
				return STATE_SCHRODINGER;
			}
			else if (noChecks > 0)
			{
				return STATE_CHECKED;
			}
			else
			{
				return STATE_UNCHECKED;
			}
		}
		private function imageToggleHandler(event:MouseEvent):void
		{
			myCheckBox.selected = !myCheckBox.selected;
			checkBoxToggleHandler(event);
		}
		private function checkBoxToggleHandler(event:MouseEvent):void
		{
			if (data)
			{
				var myListData:TreeListData = TreeListData(this.listData);
				var selectedNode:Object = myListData.item;
				var tree:Tree = Tree(myListData.owner);
				var toggle:Boolean = myCheckBox.selected;
				if (toggle)
				{
					toggleChildren(data, tree, STATE_CHECKED);
				}
				else
				{
					toggleChildren(data, tree, STATE_UNCHECKED);
				}
				var parent:Object = tree.getParentItem (data);
				toggleParents (parent, tree, getState (tree, parent));
				tree.parent.dispatchEvent(new TreeCheckBoxEvent(TreeCheckBoxEvent.CHECKBOX_CLICK,false,false,data));
			}
		}

		private function setCheckState (checkBox:CheckBox, value:Object, state:String):void
		{
			if (state == STATE_CHECKED)
			{
				checkBox.selected = true;
			}
			else if (state == STATE_UNCHECKED)
			{
				checkBox.selected = false;
			}
			else if (state == STATE_SCHRODINGER)
			{
				checkBox.selected = false;
			}
		}	    
		
	}
}

TreeCheckBoxEvent.as (需要的时候采用)
package com.render
{
	import flash.events.Event;

	public class TreeCheckBoxEvent extends Event
	{
		public static const CHECKBOX_CLICK:String = "checkBoxClick";
		private var _data:Object;
		
		public function get data():Object{
			return this._data;
		} 
		
		public function set data(data:Object):void{
			this._data = data;
		}
		public function TreeCheckBoxEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false,data:Object=null)
		{
			if(data != null) this._data = data;
			super(type, bubbles, cancelable);
		}
		
	}
}

CheckTreeDemo.mxml
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();" >

<mx:Script>
<![CDATA[
	import com.render.TreeCheckBoxEvent;

	import mx.collections.*;
	
	import mx.controls.Alert;
	[Bindable]
	public var folderList:XMLList =
		<>
		<folder state="unchecked" label="Marketing Collateral" isBranch="true" >
	      <folder state="unchecked" isBranch="true" label="Media, PR, and Communications" >
		      <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" />
		      <folder state="unchecked" isBranch="false" label="Articles Reprints" />
		      <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" />
		      <folder state="unchecked" isBranch="false" label="Press Kits" />
		      <folder state="unchecked" isBranch="false" label="Press Releases" />
		      <folder state="unchecked" isBranch="false" label="Quick Hits" />
		      <folder state="unchecked" isBranch="false" label="Rep Talking Points" />
		      <folder state="unchecked" isBranch="false" label="Special Updates" />
		      <folder state="unchecked" isBranch="false" label="White Papers" />
	      </folder>
	      <folder  state="unchecked" isBranch="true" label="Forms and Applications" >
	          <folder state="unchecked" isBranch="false" label="Applications" />
	          <folder state="checked" isBranch="false" label="Forms" />
	      </folder>
		</folder>		
		</>;
	
	[Bindable]
	public var folderCollection:XMLListCollection;
	
	private function init() : void
	{
		this.addEventListener(TreeCheckBoxEvent.CHECKBOX_CLICK,treeCheckBoxHandler);
		folderCollection = new XMLListCollection(folderList);
		checkTree.dataProvider = folderCollection;
	}
	
	private function treeCheckBoxHandler(event:TreeCheckBoxEvent):void{
		var tempXml:XML = event.data as XML;
		Alert.show(tempXml.toXMLString(),"");
	}

	
	private function updataDataGrid():void{
		Alert.show(checkTree.selectedItem.@label,"");
		//在此联动Grid
	}
]]>
</mx:Script>
	<mx:Tree 
			id="checkTree"
			itemRenderer="com.render.CheckTreeDemoRenderer"
			change="updataDataGrid()"
			labelField="@label"
 			width="100%" height="100%" >
 	</mx:Tree>
</mx:Application>
分享到:
评论

相关推荐

    纯JS+HTML写的checkBox Tree 级联选中 好用无BUG

    这个"纯JS+HTML写的checkBox Tree 级联选中"实例,解决了其他示例中可能存在的BUG,提供了一个稳定、好用的解决方案。 在该实现中,主要涉及以下几个关键知识点: 1. **HTML结构**: - 树形结构通常由`&lt;ul&gt;`和`...

    flex tree+checkbox级联勾选

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

    checkbox tree 带checkbox的树

    在IT领域,"带checkbox的树"(Checkbox Tree)是一种常见的UI组件,广泛应用于数据管理和配置界面中。这种组件结合了树形结构和复选框的功能,用户可以通过选择或取消选择节点来对数据进行多选操作,使得在层级关系...

    带有checkbox的TREE列表级联的选择子栏目的JAVA标签形式的实现

    本文将详细讲解如何实现一个带有复选框(Checkbox)的树形列表(TREE LIST)的级联选择功能,以及相关的Java标签形式实现。这种功能常见于权限管理、组织结构选择等场景,让用户能够方便地进行多层级的勾选操作。 ...

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

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

    ExtJs4 Checkbox tree

    由于Checkbox Tree支持多级节点,因此在处理全选/全不选或者级联选中时,需要使用递归算法遍历所有子节点,同步它们的选中状态。 9. **样式和模板**: 复选框的样式可以通过CSS自定义,如改变选中、未选中和三态...

    ExtJS4.2 tree 级联选择

    在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有子节点也会被自动选中,反之亦然,如果取消选中父节点,其所有子节点也将被取消选中。...

    使用jQuery+EasyUI实现CheckBoxTree的级联选中特效

    在本文中,我们将深入探讨如何使用jQuery和EasyUI库实现一个具有级联选中功能的CheckBoxTree组件。CheckBoxTree是一种常见的UI元素,常用于展示层级结构的数据,并允许用户通过复选框选择或取消选择整条数据路径。在...

    jQuery的高性能TreeView源码(带CheckBox)

    jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...

    js树状地区三级级联带复选框

    在JSTree中,你可以配置各种插件和设置,如checkbox插件来启用复选框,配置json_data或ajax数据源来动态加载地区数据。 实现过程中,你需要处理以下步骤: 1. 引入JSTree库及相关CSS和JS文件。 2. 创建HTML元素,...

    select三级级联选择实例

    一个简单html页面,实现省市的三级级联选择,根据不同情况可以控制不同展现。

    flex Tree checkbox 修改过后的

    确保在不同分辨率和屏幕尺寸下,Tree和复选框的布局都能正确显示。这可能涉及到对组件大小、位置和间距的调整。 5. **优化性能**: 由于复选框可能会导致大量的数据更新,因此需要考虑性能优化。例如,通过懒加载...

    js多级联动多选checkbox插件

    总的来说,理解和实现js多级联动多选checkbox插件涉及了JavaScript的多个核心概念,包括DOM操作、事件处理、数据结构、UI更新、性能优化以及模块化开发等。通过学习和实践,开发者可以创建出功能强大且易于使用的...

    Web开发带checkbox的treeview

    5. `checkbox.cascade`:定义选择和取消选择的级联行为,如`"down"`表示向下级联,`"up"`表示向上级联,`"undetermined"`表示同时级联并保持未确定状态。 在`jstree-master`压缩包中,包含了jsTree的核心文件和示例...

    TreeCheckBox

    它结合了树形结构(Tree)和复选框(CheckBox)的功能,让用户能够在一个层次化的数据结构中进行多选操作。在描述中提到的“在树型控件Tree中可以实现CheckBox的复选内容”,意味着用户不仅能在树节点上看到文本信息...

    CheckBox 选中效果 选中子的父自动选中,选中父的子全部选中

    ### CheckBox 选中效果:选中子的父自动选中,选中父的子...总之,通过上述分析可以看出,在实际项目开发中利用CheckBox实现父子级联选中功能不仅可以提升用户体验,还能有效简化操作流程,是一种非常实用的技术方案。

    flex tree checkbox

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

    easyui tree带checkbox实现单选的简单实例

    标题所指的“easyui tree带checkbox实现单选”是指在EasyUI的树形组件中,每个节点都可以被勾选,但同一时间只能有一个节点处于选中状态。这种功能通常用于当用户需要从多个选项中选择一个作为唯一选择的情况。 ...

Global site tag (gtag.js) - Google Analytics