Flex tree加三状态的Checkbox

网上有下过其它人的实现的样例。可是样式不好改。还有就是不能初始化选中，还有三态效果那个半选中状态也是不清楚。所以自己依据Itemrender搞了一个，还凑合

效果如图：全选和半选状态，Checkbox的flex3的样式用的图片

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ2FubGluZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

TreeCheckboxItemRender.mxml

<?

xml version="1.0" encoding="utf-8"?>

<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

					  xmlns:s="library://ns.adobe.com/flex/spark"

					  xmlns:mx="library://ns.adobe.com/flex/mx" initialize="mxtreeitemrenderer1_initializeHandler(event)">

	<fx:Metadata>

		[Event(name="checkBoxClick",type="CustomEvent")]

	</fx:Metadata>

	<fx:Style>

		@namespace s "library://ns.adobe.com/flex/spark";

		@namespace mx "library://ns.adobe.com/flex/mx";

		.halfSelected{

			upIcon:Embed(source='1.png');

			overIcon:Embed(source='1.png');

			downIcon:Embed(source='1.png');

			disabledIcon:Embed(source='1.png');

		}

		.selected{

			upIcon:Embed(source='4.png');

			overIcon:Embed(source='4.png');

			downIcon:Embed(source='4.png');

			disabledIcon:Embed(source='4.png');

		}

		.unSelected{

			upIcon:Embed(source='2.png');

			overIcon:Embed(source='3.png');

			downIcon:Embed(source='3.png');

			disabledIcon:Embed(source='2.png');

		}

	</fx:Style>

	<fx:Script>

		<![CDATA[

			import mx.controls.Tree;

			import mx.events.FlexEvent;

			[Bindable]

			[Embed(source="1.png")]

			public static var HARFSELECT_CLASS:Class;

			[Bindable]

			[Embed(source="2.png")]

			public static var UNSELECT_CLASS:Class;

			[Bindable]

			[Embed(source="3.png")]

			public static var UNSELECT_OVER_CLASS:Class;

			[Bindable]

			[Embed(source="4.png")]

			public static var SELECT_CLASS:Class;

			override protected function commitProperties():void

			{

				super.commitProperties();

				if(data != null && data.@selected != ""){

					if(data.children().length() == 0){

						if(data.@selected == "true"){

							checkBox.selected = true;

						} else{

							checkBox.selected = false;

						}

						return;

					}

					recursion(data);

				} else{

					checkBox.selected = false;

				}

			}

			private function recursion(dataItem:Object):void{

				//遍历全部子节点。假设子节点下还有子节点则递归

				for(var i:int = 0; i < dataItem.children().length(); i++){

					var child:XML = dataItem.children()[i];

					if(child.children().length() > 0){

						recursion(child);

					}

				}

				//查询该节点下的选中的子节点

				var selectedChild:XMLList = dataItem..node.(@pid == dataItem.@id && @selected == "true");

				var selectElement:XMLList = dataItem..node.(@selected == "true");

				//假设该节点的子节点数等于该节点下选中的子节点数，则该节点选中

				if(dataItem.children().length() == selectedChild.length()){

					checkBox.selected = true;

					dataItem.@selected = "true";

					fillCheckBox(false);

				} else{

					checkBox.selected = false;

					fillCheckBox(false);

					if(selectElement.length() > 0){

						fillCheckBox(true);

					}

				}

			}

			protected function checkBox_changeHandler(event:Event):void

			{

				if(data.@selected != ""){

					toggleChildrens(data);

					toggleParents(data, Tree(this.owner));

				}

			}

			private function toggleChildrens(item:Object):void{

				item.@selected = checkBox.selected;

				for(var i:int = 0; i < item.children().length(); i++){

					item.children()[i].@selected = checkBox.selected;

					toggleChildrens(item.children()[i]);

				}

			}

			/**

			 * // TODO : 递归设置父项目的状态

			 * @param item 项目

			 * @param tree 树对象

			 * @param state 目标状态

			 *

			 */

			private function toggleParents(item:Object, tree:Tree):void

			{

				if (item == null)

					return ;

				else

				{

				var parentItem:Object=tree.getParentItem(item);

				if(parentItem != null){

						if(item.@selected == "false"){

							parentItem.@selected = "false";

						}else{

							var flag:int = 0;

							for(var i:int = 0; i < parentItem.children().length(); i++){

								if(parentItem.children()[i].@selected == "true"){

									flag++;

								}

							}

							if(flag == parentItem.children().length()){

								parentItem.@selected = "true";

							}

						}

						toggleParents(parentItem, tree);

					}

				}

			}

			protected function fillCheckBox(isFill:Boolean):void

			{

				checkBox.graphics.clear();

				if (isFill)

				{

					var myRect:Rectangle=checkBox.getBounds(checkBox);

					checkBox.graphics.beginFill(0xff0000, 1)

					checkBox.graphics.drawRoundRect(myRect.x+3, myRect.y+3, checkBox.width/2, checkBox.height/2, 1, 1);

					checkBox.graphics.endFill();

					checkBox.styleName = "halfSelected";

				} else{

					if(checkBox.selected){

						checkBox.styleName = "selected";

					} else{

						checkBox.styleName = "unSelected";

					}

				}

			}

			protected function mxtreeitemrenderer1_initializeHandler(event:FlexEvent):void

			{

				// TODO Auto-generated method stub

				//Tree(this.owner)

			}

			protected function checkBox_clickHandler(event:MouseEvent):void

			{

				// TODO Auto-generated method stub

				Tree(this.owner).dispatchEvent(new CustomEvent(CustomEvent.CHECKBOX_CLICK, {"selected":checkBox.selected}));

			}

		]]>

	</fx:Script>

	<s:states>

		<s:State name="normal" />

		<s:State name="hovered" />

		<s:State name="selected" />

	</s:states>

	<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">

		<s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">

			<s:fill>

				<s:SolidColor color="0xFFFFFF" />

			</s:fill>

		</s:Rect>

		<s:Group id="disclosureGroup">

			<s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />

		</s:Group>

		<mx:CheckBox id="checkBox" change="checkBox_changeHandler(event)" click="checkBox_clickHandler(event)"

					 styleName="unSelected"

					 selectedDownIcon="{SELECT_CLASS}" selectedUpIcon="{SELECT_CLASS}" selectedOverIcon="{SELECT_CLASS}"/>

		<s:BitmapImage source="{treeListData.icon}" />

		<s:RichEditableText id="labelField" editable="false" text="{treeListData.label}" paddingTop="2"/>

	</s:HGroup>

</s:MXTreeItemRenderer>

主文件

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

			   xmlns:s="library://ns.adobe.com/flex/spark"

			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="com.pricklythistle.common.components.*">

	<fx:Declarations>

		<!-- 将非可视元素（比如服务、值对象）放在此处 -->

		<fx:XML xmlns="" id="xmlData">

			<node id="0" pid="-1" label="厦门" openedId="-1" type="-1" cid="0" selected="false" isBranch="true">

				<node id="110" pid="0" selected="false" cid="0" isBranch="true" type="2" updateStatus="1" label="软件园演示点2" createTime="1404267128253" updateTime="1404267128253" icon="">

					<node id="362" pid="110" selected="false" cid="110" label="望海路（720P－变码率）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404268448260" updateTime="1404268514558" icon=""/>

					<node id="360" pid="110" selected="false" cid="110" label="电梯间（720P－变码率）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="1" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404268305648" updateTime="1404268724984" icon=""/>

					<node id="359" pid="110" selected="false" cid="110" label="办公室（720P－变码率）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404268247553" updateTime="1404268725016" icon=""/>

					<node id="361" pid="110" selected="false" cid="110" label="停车场（720P－变码率）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404268394947" updateTime="1410789105184" icon=""/>

				</node>

				<node id="101" pid="0" cid="0" selected="false" isBranch="true" type="2" updateStatus="1" label="软件园演示点（户外）" createTime="1404121845986" updateTime="1408623064915" icon="">

					<node id="357" pid="101" selected="false" cid="101" label="三叉路口（720P-均衡）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>

					<node id="356" pid="101" selected="false" cid="101" label="停车场（720P-高清）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355717" updateTime="1410773658118" icon=""/>

					<node id="358" pid="101" selected="false" cid="101" label="办公室（720P-流畅）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404182528941" updateTime="1410773894041" icon=""/>

					<node id="355" pid="101" selected="false" cid="101" label="球机（720P-可云台控制）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355654" updateTime="1410779974117" icon=""/>

					<node id="354" pid="101" selected="false" cid="101" label="望海路（720P-流畅）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355592" updateTime="1410787537718" icon=""/>

					<node id="222" pid="101" cid="0" selected="false" isBranch="true" type="2" updateStatus="1" label="软件园二期演示点（户外）" createTime="1404121845986" updateTime="1408623064915" icon="">

						<node id="200" pid="222" selected="false" cid="222" label="观日路" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>

						<node id="201" pid="222" selected="false" cid="222" label="公厕" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>

						<node id="202" pid="222" selected="false" cid="222" label="景观湖" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>

					</node>

					<node id="333" pid="101" cid="0" selected="false" isBranch="true" type="2" updateStatus="1" label="软件园一期演示点（户外）" createTime="1404121845986" updateTime="1408623064915" icon="">

						<node id="210" pid="333" selected="false" cid="222" label="十字路口" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>

					</node>

				</node>

			</node>

		</fx:XML>

	</fx:Declarations>

	<fx:Script>

		<![CDATA[

		]]>

	</fx:Script>

	<mx:Tree id="tree" dataProvider="{xmlData}" styleName="treeStyle" horizontalCenter="0" width="270" height="100%"

			 itemRenderer="TreeCheckboxItemRender" labelField="@label"/>

</s:Application>

说明：在xml文件里基本的两个属性就是pid和selected属性，pid就是父ID，selected代表是否选中，假设为true初始化的时候就选中，我在Itemrender中是用这两个属性来推断这三个状态的

Flex tree加三状态的Checkbox的更多相关文章

EasyUI tree的三种选中状态
EasyUI中tree有三种选中状态,分别是checked(选中).unchecked(未选中).indeterminate(部分选中). 其中indeterminate状态比较特殊,主要表示只有部分 ...
FPGA加三移位算法：硬件逻辑实现二进制转BCD码
本文设计方式采用明德扬至简设计法.利用FPGA来完成显示功能不是个很理想的方式,当显示任务比较复杂,要通过各种算法显示波形或者特定图形时,当然要用单片机通过C语言完成这类流程控制复杂,又对时序要求不高 ...
加载状态为complete时移除loading效果
一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = docum ...
Device Tree（三）：代码分析【转】
转自:http://www.wowotech.net/linux_kenrel/dt-code-analysis.html Device Tree(三):代码分析作者:linuxer 发布于:201 ...
bootstrap按钮加载状态改变
bootstrap里面有个激活按钮的时候,按钮变成不可用的: 按照官网里面的方法介绍是在button按钮加个data-loading-text="Loading..."属性,然后j ...
js 判断页面加载状态
//----判断当前页面是否加载状态开始 ---- document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function ...
动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
RxJava异步请求加载状态控制
在我看来,RxJava最大的特点就是异步,无论你是解析复杂的数据或是IO操作,我们都可以利用它内置的线程池进行线程间的调度,简单的使用 subscribeOn(Schedulers.io()).doO ...
Report Server运行后一直处于加载状态
描述:对Report server做了一个小练习,算是入门,但发现运行起来后,页面一直处于加载状态,不知为何? 解决:查了一下网上的资料,解决的方法是 protected void Page_Load ...

随机推荐

java 数据类型与数据库数据类型的对应关系
java 数据类型与数据库数据类型的对应关系 CreationTime--2018年7月1日10点08分 Author:Marydon 相关推荐: java 读取clob
appium日志示例解读
http://www.colabug.com/thread-1048952-1-1.html
Html Agility Pack - API
Html Agility Pack - APIParserSelectorsManipulationTraversingWriterUtilitiesAttributes HTML Parser HT ...
Electromagnetic radiation and Radio 电磁波/电磁辐射和无线电波
电磁辐射,又称电磁波,是由同相振荡且互相垂直的电场与磁场在空间中以波的形式传递能量和动量,其传播方向垂直于电场与磁场构成的平面. 电磁辐射的载体为光子,不需要依靠介质传播,在真空中的传播速度为光速.电 ...
用命令行发邮件——让你更加了解smtp
本文演示用命令行发送邮件的过程. SMTP 首先介绍下smtp协议--简单邮件传输协议 (Simple Mail Transfer Protocol, SMTP) 是事实上的在Internet传输em ...
Android spinner 样式及其使用详解
设计与开发首页 > 应用专题 > 移动开发 > 正文> Android spinner 样式及其使用详解相关文章: Android 开源项目应用程序与框架推荐 Android ...
C# sqlserver 2008 连接字符串
sqlserver 2008 的连接字符串和sql2005的几乎是一样的,但是,他们对于其中的一些配置要求不同.我试着用了很多连接字符串,最后找到了问题的原因,特别记录到这里,如果有相同问题的同学,可 ...
linux shell 脚本攻略学习9--rename命令详解
rename命令详解: 对文件重命名是常用的操作之一,一般对单个文件的重命名用mv命令,如: amosli@amosli-pc:~/learn/example$ ls abc.txt amosli@a ...
linux 系统获得当前文件夹下存在的所有文件 scandir函数和struct dirent **namelist结构体[转]
linux 系统获得当前文件夹下存在的所有文件 scandir函数和struct dirent **namelist结构体 1.引用头文件#include<dirent.h> struct ...
进阶之路（基础篇） - 014 通过RGB灯输出七色
本文由博主原创,如有不对之处请指明,转载请说明出处. /********************************* 代码功能:输出模拟信号,控制RGB灯的颜色使用函数: pinMode(引脚 ...

Flex tree加三状态的Checkbox

Flex tree加三状态的Checkbox的更多相关文章

随机推荐

热门专题