现在的位置: 首页 > 综合 > 正文

flex自定义用ArrayCollection做数据源的带checkbox的tree(功能强大的完美版^_^)

2012年09月13日 ⁄ 综合 ⁄ 共 4791字 ⁄ 字号 评论关闭
自定义组件:
package com.anydata.consumer.renderers
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.collections.ICollectionView;
	import mx.collections.IList;
	import mx.collections.IViewCursor;
	import mx.controls.CheckBox;
	import mx.controls.Image;
	import mx.controls.Tree;
	import mx.controls.treeClasses.ITreeDataDescriptor;
	import mx.controls.treeClasses.TreeItemRenderer;
	import mx.controls.treeClasses.TreeListData;
	/**
	 * 支持CheckBox的TreeItemRenderer
	 * @author Montage
	 */
	public class TreeCheckBoxRenderer extends TreeItemRenderer
	{
		public function TreeCheckBoxRenderer()
		{
			super();
		}
		protected var myImage:Image;
        private var imageWidth:Number 	= 12;
	    private var imageHeight:Number 	= 12;
        // set image properties
        private var inner:String 	= "@Embed(source='assets/inner.png')";
		protected var checkBox:CheckBox;
		/**
		 * 表示CheckBox控件从data中所取数据的字段
		 */
		private var _selectedField:String="selected";

		/**
		 * 点击checkbox时,更新dataProvider
		 * @param event
		 */
		protected function changeHandler(event:Event):void
		{
			if (data && data[_selectedField] != undefined)
			{
				data[_selectedField]=checkBox.selected;
			}

			var myListData:TreeListData=TreeListData(this.listData);
			var tree:Tree=Tree(myListData.owner);
			/* var toggle:Boolean=checkBox.selected; */
			toggleChildren(data, tree);
			var parent:Object=tree.getParentItem(data);
			toggleParents (parent, tree);

		}

		/**
		 * 初始化控件时, 给checkbox赋值
		 */
		override protected function commitProperties():void
		{
			super.commitProperties();
			//trace(data[_selectedField])
			if (data && data[_selectedField] != undefined)
			{
				checkBox.selected=data[_selectedField];
			}
			else
			{
				checkBox.selected=false;
			} 
		}

		/**
		 * 构建CheckBox
		 */
		override protected function createChildren():void
		{
			super.createChildren();
			checkBox=new CheckBox();
			addChild(checkBox);
			checkBox.addEventListener(Event.CHANGE, changeHandler);
			myImage = new Image();
	    	myImage.source='assets/inner.png';
			myImage.addEventListener( MouseEvent.CLICK, imageToggleHandler );
			addChild(myImage);
		}
		private function imageToggleHandler(event:Event):void
		{
			checkBox.selected = !checkBox.selected;
			changeHandler(event);
		}

		/**
		 * 重置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);
			if(super.data)
	        {
			    if (super.icon != null)
			    {
				    checkBox.x = super.icon.x;
				    checkBox.y = 13;
				    super.icon.x = checkBox.x + checkBox.width + 25;
				    super.label.x = super.icon.x + super.icon.width + 3;
				}
				else
			    {
				    checkBox.x = super.label.x;
				    checkBox.y = 13;
				    super.label.x = checkBox.x + checkBox.width + 25;
				}
			    if (data[_selectedField] == "11")
			    {
			    	myImage.x = checkBox.x+3 ;
			    	myImage.y = checkBox.y-5 ;
					myImage.width = imageWidth;
					myImage.height = imageHeight;
					checkBox.selected = false;
			    }
			    else
			    {
			    	myImage.x = 0;
			    	myImage.y = 0;
					myImage.width = 0;
					myImage.height = 0;
			    }
			}
		}

		private function toggleChildren(item:Object, tree:Tree):void
		{
			if (item == null)
			{
				return;
			}
			else
			{
				var treeData:ITreeDataDescriptor=tree.dataDescriptor;

				item[_selectedField]=checkBox.selected;

				var tmpTree:IList=tree.dataProvider as IList;
				tmpTree.itemUpdated(item);

				if (treeData.hasChildren(item))
				{
					var children:ICollectionView=treeData.getChildren(item);
					var cursor:IViewCursor=children.createCursor();
					while (!cursor.afterLast)
					{
						toggleChildren(cursor.current, tree);
						cursor.moveNext();
					}
				}
			}

		}
		
		 private function toggleParents (item:Object, tree:Tree):void{
		 	if (item == null)
			{
				return;
			}
			else
			{
				var numChecks:int = 0;
				var numUnChecks:int = 0;
				var numCats:int = 0;
				
				var treeData:ITreeDataDescriptor=tree.dataDescriptor;
				var children:ICollectionView=treeData.getChildren(item);
				var cursor:IViewCursor=children.createCursor();
				
				while (!cursor.afterLast)
				{
					 if(cursor.current[_selectedField]){
					 	numChecks++;
					 }else{
					 	numUnChecks++;
					 }
					 cursor.moveNext();
				}
				if(numChecks>0&& numUnChecks>0){
					item[_selectedField] = "11"
				}else if(numChecks>0){
					item[_selectedField]=true;
				}else{
					item[_selectedField]=false;
				}
				var tmpTree:IList=tree.dataProvider as IList;
				tmpTree.itemUpdated(item);
				if(tree.getParentItem(item)!=null){
					toggleParents(tree.getParentItem(item),tree);
				}
			}
		 }
		
	}
}

画面代码:
[Bindable]
   public var collection:ArrayCollection=new ArrayCollection([{"name": "上海", "selected": false, "children": [{"name": "黄浦", "selected": false}, {"name": "浦东", "selected": true, "children": []}, {"name": "静安", "selected": false}, {"name": "徐汇", "selected": false}]}, {"name": "北京", "selected": false, "children": [{"name": "海淀", "selected": false}, {"name": "朝阳", "selected": true}, {"name": "丰台", "selected": false}]}]);
<mx:Tree x="29" y="48" width="100%" height="100%" 
      id="groupTree" dataProvider="{collection}" 
      showRoot="true" fontSize="14" fontWeight="bold" 
      doubleClickEnabled="true" paddingLeft="20" 
         itemRenderer="com.anydata.consumer.renderers.TreeCheckBoxRenderer"
         itemOpen="groTree_itemOpeningHandler(event)"

         labelField="name" 
         defaultLeafIcon="@Embed(source='assets/ico_phone.gif')" 
         folderClosedIcon="@Embed(source='assets/ico_team.gif')"
         folderOpenIcon="@Embed(source='assets/ico_team.gif')"></mx:Tree>

抱歉!评论已关闭.