Flex4_Tree组件2(添加多选框、修改树图标)

1、新建AS类，用于为Tree生成复选框，及一些选择事件。

package com.th.myUtils

{

    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; /** * 支持CheckBox的TreeItemRenderer * @author Montage */ public class TreeCheckBoxRenderer extends TreeItemRenderer { public function TreeCheckBoxRenderer() { super(); } /** * 表示CheckBox控件从data中所取数据的字段 */ protected var checkBox:CheckBox; /** * 构建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 { //var i:int=0; 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!="" ) { 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(); } } }

2、Flex页面代码

<?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"> <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 mx.controls.Alert; [Bindable] private var studetXml:XML= <nj label="一年级" id="n1" lx="0" selected="false"> <bj label="1班" id="b1" lx="1" selected="false"> <student label="刘备" id="s1" lx="2" selected="false"/> <student label="张飞" id="s2" lx="2" selected="false"/> <student label="关羽" id="s3" lx="2" selected="false"/> <student label="诸葛亮" id="s4" lx="2" selected="false"/> <student label="貂蝉" id="s5" lx="2" selected="false"/> <student label="吕布" id="s6" lx="2" selected="false"/> </bj> </nj>; private function treeChangeHandle(event:Event):void{ var selectedTreeNode:XML; selectedTreeNode=Tree(event.target).selectedItem as XML; } private function test():void{ txtAr.text=getSelectedChild(studetXml); } 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].@lx=="2")){ result+=xml.children()[i].@label+"\n"; } var oxml:XML=new XML(xml.children()[i].toString()); if(oxml.children().length()>0){ result+=getSelectedChild(oxml); } } return result; } ]]> </fx:Script> <s:Panel x="28" y="20" width="250" height="412" title="所有学生"> <mx:Tree id="tree" top="0" left="0" width="100%" height="100%" labelField="@label" itemRenderer="com.th.myUtils.TreeCheckBoxRenderer" dataProvider="{studetXml}" change="treeChangeHandle(event)" styleName="Tree"> </mx:Tree> </s:Panel> <s:Panel x="286" y="20" width="250" height="412" title="选中的学生"> <s:TextArea id="txtAr" top="0" left="0" width="100%" height="100%"/> </s:Panel> <s:Button x="28" y="454" label="添加选中" click="test()"/> </s:Application>

3、效果图：