首页 > 代码库 > Flex4_Tree组件2(添加多选框、修改树图标)

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