加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

flex自定义用ArrayCollection做数据源的带checkbox的tree(功能

发布时间:2020-12-15 04:20:11 所属栏目:百科 来源:网络整理
导读:自定义组件: 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;im
自定义组件:
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": "静安",{"name": "徐汇","selected": false}]},{"name": "北京","children": [{"name": "海淀",{"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>

写得不容易,看过给声好好歹!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读