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、效果圖：