[Flex] 组件Tree系列 —— 支持CheckBox组件

时间:2025-01-20 14:06:08

主程序mxml:

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

 <!--功能描述:支持CheckBox-->

 <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">
<fx:Declarations> </fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Tree{
/*去掉默认文件夹图标*/
folderClosedIcon: ClassReference(null);
folderOpenIcon: ClassReference(null); /*去掉叶子节点图标*/
defaultLeafIcon: ClassReference(null); /*
defaultLeafIcon 指定叶图标
disclosureClosedIcon 指定的图标旁边显示一个封闭的分支节点。默认的图标是一个黑色三角形。
disclosureOpenIcon 指定的图标旁边显示一个开放的分支节点。默认的图标是一个黑色三角形。
folderClosedIcon 关闭指定的文件夹图标的一个分支节点。
folderOpenIcon 指定打开的文件夹图标的一个分支节点。
例:三角图标修改如下代码使用即可换成自己的了:
disclosureOpenIcon:Embed(source='images/a.png');
disclosureClosedIcon:Embed(source='images/b.png');
*/
} </fx:Style> <fx:Script>
<![CDATA[
import com.render.TreeRightClickManager; import mx.controls.Alert;
private var rightClickRegisted:Boolean; [Bindable]
private var data:XML=
<data>
<actor label="周星驰" level="0" selected="false">
<year label="1988" level="1" selected="false">
<item label="《霹雳先锋》香港票房8916612 " level="2" selected="false"/>
<item label="《捕风汉子》香港票房3149395 " level="2" selected="false"/>
<item label="《最佳女婿》香港票房5807710 " level="2" selected="false"/>
</year>
<year label="1989" level="1" selected="false">
<item label="《龙在天涯》香港票房6809853 " level="2" selected="false"/>
<item label="《义胆群英》香港票房7913329 " level="2" selected="false"/>
<item label="《流氓差婆》香港票房5624622 " level="2" selected="false"/>
<item label="《风雨同路》香港票房9335299 " level="2" selected="false"/>
</year>
<year label="1990" level="1" selected="false">
<item label="《望夫成龙》香港票房13703364 " level="2" selected="false"/>
<item label="《咖喱辣椒》香港票房15777856 " level="2" selected="false"/>
<item label="《小偷阿星》香港票房7968106 " level="2" selected="false"/>
<item label="《师兄撞鬼》香港票房12128944 " level="2" selected="false"/>
<item label="《赌圣》香港票房41326156 " level="2" selected="false"/>
<item label="《无敌幸运星》香港票房18799869" level="2" selected="false"/>
<item label="《江湖最后一个大佬》香港票房5495811 " level="2" selected="false"/>
</year>
</actor> <actor label="李连杰" level="0" selected="false">
<year label="1992" level="1" selected="false">
<item label="笑傲江湖之东方不败(1992)" level="2" selected="false"/>
<item label="黄飞鸿之二男儿当自强(1992) " level="2" selected="false"/>
<item label="黄飞鸿之三狮王争霸(1992) " level="2" selected="false"/>
</year>
<year label="1993" level="1" selected="false">
<item label="方世玉Ⅱ万夫莫敌(1993) " level="2" selected="false"/>
<item label="倚天屠龙记之魔教教主(1993)" level="2" selected="false"/>
<item label="黄飞鸿之铁鸡斗蜈蚣(1993)" level="2" selected="false"/>
<item label="太极张三丰(1993)" level="2" selected="false"/>
</year>
<year label="1994" level="1" selected="false">
<item label="新少林五祖(1994)" level="2" selected="false"/>
<item label="精武英雄(1994)" level="2" selected="false"/>
<item label="*保镖(1994)" level="2" selected="false"/>
<item label="给爸爸的信(1995)" level="2" selected="false"/>
</year>
<year label="1995" level="1" selected="false">
<item label="鼠胆龙威(1995)" level="2" selected="false"/>
<item label="给爸爸的信(1995)" level="2" selected="false"/>
</year>
</actor>
</data>
;
private function treeChangeHandle(event:Event):void{
var selectedTreeNode:XML;
selectedTreeNode=Tree(event.target).selectedItem as XML;
} private function getSelectedChild(xml:XML):String{
var result:String="";
for(var i:int=0;i<xml.children().length();i++){
if((xml.children()[i].@selected=="true") && (xml.children()[i].@level=="2")){
result+=xml.children()[i].@label+"\n";
}
var temp:XML=new XML(xml.children()[i].toString());
if(temp.children().length()>0){
result+=getSelectedChild(temp);
}
}
return result;
} protected function add_clickHandler(event:MouseEvent):void
{
txtAr.text=getSelectedChild(data);
} ]]>
</fx:Script> <s:Panel width="300" height="400" title="所有影片">
<mx:Tree id="tree" top="0" left="0" width="100%" height="100%" labelField="@label" showRoot="false"
itemRenderer="com.render.TreeCheckBoxRenderer" dataProvider="{data}"
change="treeChangeHandle(event)" styleName="Tree">
</mx:Tree>
</s:Panel>
<s:Panel x="310" width="300" height="400" title="选中的影片">
<s:TextArea id="txtAr" top="0" left="0" width="100%" height="100%"/>
</s:Panel>
<s:Button y="410" label="添加选中" click="add_clickHandler(event)"/>
</s:Application>

com.render.TreeCheckBoxRenderer类:

package com.render
{
import flash.events.Event;
import flash.events.MouseEvent; import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.controls.Tree;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData; import spark.components.Button; /**
* 支持CheckBox的TreeItemRenderer
* @author
*
*/
public class TreeCheckBoxRenderer extends TreeItemRenderer
{
public function TreeCheckBoxRenderer()
{
super();
} /**
* 表示CheckBox控件从data中所取数据的字段
*/ protected var checkBox:CheckBox;
protected var button:Button; /**
* 构建CheckBox
*/
override protected function createChildren():void
{
super.createChildren();
checkBox = new CheckBox();
addChild( checkBox );
checkBox.addEventListener(Event.CHANGE, changeHandler);
} /**
* 点击checkbox时,更新dataProvider
* @param event
*/
protected function changeHandler( event:Event ):void
{
if( data.@selected!="" ){
data.@selected= checkBox.selected.toString();
for (var i:int=0;i<data.children().length();i++){
data.children()[i].@selected=checkBox.selected.toString();;
}
}
} /**
* 初始化控件时, 给checkbox赋值
*/
override protected function commitProperties():void
{
super.commitProperties();
if(data.@selected!="" ){
//trace(data,"data");
if(data.@selected=="true"){
checkBox.selected=true;
}else{
checkBox.selected=false;
}
}
else{
checkBox.selected = false;
}
} /**
* 重置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);
var startx:Number = data ? TreeListData( listData ).indent : 0;
if (disclosureIcon){
disclosureIcon.x = startx;
startx = disclosureIcon.x + disclosureIcon.width;
disclosureIcon.setActualSize(disclosureIcon.width,disclosureIcon.height);
disclosureIcon.visible = data ?TreeListData( listData ).hasChildren :false;
} if (icon){
icon.x = startx;
startx = icon.x + icon.measuredWidth;
icon.setActualSize(icon.measuredWidth, icon.measuredHeight);
}
checkBox.move(startx, ( unscaledHeight - checkBox.height ) / 2 );
label.x = startx + checkBox.getExplicitOrMeasuredWidth();
}
}
}