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