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 ...
随机推荐
- Linux文件权限与目录
1:文件操作者的身份 owner:创建文件.拥有文件的登录用户. group:同一群组内的用户. others:其他登录用户. [系统账户与密码信息保存在/etc/passwd:个人账户与密码信息保存 ...
- Ubuntu中的Gif动画录制工具
为了在随笔中插入gif动态图Windows系统上可以使用ScreenToGif这个非常好用的小软件,在Ubuntu系统中选择也很多(可以参考最下面的链接),下面介绍两款ubuntu系统中的录屏软件: ...
- 使用正态分布变换（Normal Distributions Transform）进行点云配准
正态分布变换算法是一个配准算法,它应用于三维点的统计模型,使用标准优化技术来确定两个点云间的最优的匹配,因为其在配准过程中不利用对应点的特征计算和匹配,所以时间比其他方法快.下面是PCL官网上的一个例 ...
- rhel7.x配置本地yum
转载:http://www.mvpbang.com/articles/2017/12/22/1513948827684.html rhel7.x配置本地yum 环境: centos7.4 vmarew ...
- 编程算法 - 迷宫的最短路径 代码(C++)
迷宫的最短路径 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 给定一个大小为N*M的迷宫. 迷宫由通道和墙壁组成, 每一步能够向邻接的上下 ...
- 从零開始学android<AnalogClock与DigitalClock时钟组件.三十一.>
这两个组件比較交单,大家看下会使用即可了 XML文件配置 <span style="font-size:18px;"><RelativeLayout xmlns: ...
- js获取height和width总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- android发送与接收超长短信
android发送与接收超长短信 android接收发送短信,支持的最大字符数是70个,实际是67个字符,如果发送的短信超过了该数目,那就需要用到sendMultipartTextMessage()方 ...
- Android webView打不开baidu网页的解决办法
有时候会出现一些很奇怪的问题,比如,webview就是打不开百度网页,那么 加上这句就好了(备忘): WebSettings webSettings = webview.getSettings(); ...
- SpringBoot与Dubbo整合的三种方式
1. 使用默认application.properties和注解的方式 导入dubbo-starter,在application.properties配置属性,使用@Service注解来暴露服务,使用 ...