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

自定义组件:
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>


你可能感兴趣的:(arrayCollection)