Flex tree加三状态的Checkbox

最新推荐文章于 2021-09-27 17:38:29 发布
最新推荐文章于 2021-09-27 17:38:29 发布
阅读量2.3k 收藏
点赞数
分类专栏： Flex/As
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songanling/article/details/39372027
版权

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

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




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中是用这两个属性来判断这三个状态的

布丰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex Tree 中Checkbox
03-25
本资源中包括Tree的文件和Tree的渲染文件（Checkbox），实现功能为点击树不获取值（也可以获取，改变一个变量即可），只有勾选Checkbox才能得到。并添加到集合中
Flex中带有三种状态CheckBox的Tree的实现
09-16 334
常常会用到带有3种状态CheckBox的树形组件，比如在权限管理中，或者是地区选择中等等，如下图： 不多说费话了，直接进入主题，看看如何实现。其实在Flex中，只用自己实现一个TreeItemRenderer就可以了，代码如下： package com.robin
学习tree 控件（基础）
john2522的专栏
09-14 906
学习tree 控件：http://www.cxseo.net/web/200903/20/news_contentrid229.html 一、树形控件的常用属性 1、dragMoveEnabled：是否在拖放的过程中将节点移动，而不是复制。 2、folderOp
FLEX CheckBox 翻页后选中状态显示错乱
u011499055的专栏
05-08 701
这几天在维护一个Flex 项目，项目有点老，无意被我发现了一个bug，
Flex tree相关知识
JAVAZHICHIZHE的专栏
08-15 139
1、 为tree设置节点图标 flex tree中根据节点设置图标 做法： 用到哪个ico,则先把它定义成一个class(会打包到swf中），然后通过xml的 icoField属性或者通过icoFunction事件来返回相应的图标。 如： [Embed(source="assets/max_over.gif")] //这是图片的相对地...
Flex Tree组件
damaolly的专栏
08-02 4488
实现功能： 1、给Tree设置交替行的颜色(alternatingItemColors) 2、设置展开第一级、设置全部展开 3、可任意选中Tree中的某个节点***/根据功能，选择到某个节点 4、设置Tree打开关闭的过渡时间 效果图: 1、Tree的基础代码： <mx:Tree id="Global_Tree" openDuration="1000"
flex Tree checkbox 修改过后的
05-03
在网上找到了关于flex 的tree在前面加上checkbox， 我经过改动， 现在很适合使用。
Flex4的Tree控件加CheckBox
04-08
在原来flex的Tree组件上添加复选框CheckBox
flex tree+checkbox级联勾选
12-26
flex tree+checkbox可实现级联勾选
flex checkboxtree复选树形下拉框
12-26
flex复选树形下拉框，在ReportListPage.mxml里面有应用及树数据的加载
Flex带CheckBox的多选 列表和表格
03-26
Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格 Flex带CheckBox的多选 列表和表格
flex中tree和checkbox结合使用的插件
04-17
flex中tree和checkbox结合使用的插件，该压缩包包含两个文档，一个是tree和checkbox结合使用的插件，另一个是使用示例
flex带复选框的tree，flex checkboxtree
07-13
flex带复选框的tree，包含源代码，需要用到的朋友请下载
flex Tree 复选框。
11-28
flex tree 复选框，以及父目录的三种状态。（全部选中，部分选中，没有选中）
flex动态生成checkbox
01-06
flex动态生成checkbox，方便多项选择维护更新
讲一下 SVG... 吧
wb121017405的博客
09-27 622
SVG标签里的内容和一些d3.js操作前言一、svggforeignobjectlinerectcirclepathtext一些标签上的常见属性二、d3.js [v5中文文档](https://www.d3js.org.cn/)1. d3-selection2. d3-zoom2. d3-force2. d3-hierarchy总结 前言 迫于工作需要，使用到了d3来绘制基于svg的思维导图和力导向图 所以对svg还算比较熟悉了，在此做个纪念。 真文档还是去看菜鸟吧 一、svg
flex3 Tree右键菜单
08-02
flex3 Tree右键菜单, 前一个是flex4的, 这个滚动条好用
为Flex Tree控件构造树形结构数据
04-21
NULL 博文链接：https://lipbb.iteye.com/blog/1914043
Flex带CheckBox的多选下拉框
03-26
Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框 Flex带CheckBox的多选下拉框
el-tree子节点带复选框
最新发布
09-26
el-tree的子节点带有复选框的样式可以通过修改CSS样式来实现。根据提供的引用内容，你可以...这段代码可以使一级节点不显示复选框，其他子节点在收起状态下不显示复选框，展开状态下显示复选框，叶子节点显示复选框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值