Flex Tree的checkBox实现方法

摘要

Flex原生态的tree插件是没有单选框和复选框的,在现实中,我们往往需要的tree可能需要更加复杂的方法,下面是对flex tree控件的扩展,增加了复选框。

package cn.actionscript
{
    import flash.events.MouseEvent;
                                             
    import flash.events.Event;
                                             
    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 wgy
     */   
    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
        {
            if(null==data){
               return ;
            }
            if( data.@state== "checked")
            {
                data.@state= "unchecked";
                return ;
                /**
                 * 如果有需要,在这里处理选中父,全选子节点的方法(这个方式暂时去掉,如果有需要去掉注释即可)。
                 * */
//              for (var i:int=0;i<data.children().length();i++)
//              {
//                  data.children()[i].@selected=checkBox.selected.toString();;
//                 
//              }      
            }
            data.@state= "checked";
                                             
        }
                                                 
                                                 
        /**
         * 初始化控件时, 给checkbox赋值
         */       
        override protected function commitProperties():void
        {
            super.commitProperties();
            if(null==data){
                return;
            }
            if(data.@state!="" )
            {
                if(data.@state=="checked"){
                    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();
        }
    }
}

mxml文件内容

<?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"
               xmlns:services="services.*"
               xmlns:compoent="cn.ccb.yn.acms.compoent.*"
               minWidth="955" minHeight="600" creationComplete="initData()">
    <fx:Declarations>
        <s:CallResponder id="queryBranchResult" result="queryBranchResult_resultHandler(event)"/>
        <services:UserUccImpl id="userUccImpl"
                              fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                              showBusyCursor="true"/>
              
              
    </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;
            import mx.rpc.events.ResultEvent;
            [Bindable]
            public var xmlBank:String;
            [Bindable]
            public var str:XMLList;
            private function treeChangeHandle(event:Event):void{
                var selectedTreeNode:XML;
                selectedTreeNode=Tree(event.target).selectedItem as XML;
            }
            public function initData():void{
                queryBranchResult.token = userUccImpl.queryBranch("wgy.yn");
            }
                  
            private function test():void{
                txtAr.text=getSelectedChild(str);
            }
                  
            private function getSelectedChild(xml:XMLList):String{
                var result:String="";
                for(var i:int=0;i<xml.children().length();i++){
                    if((xml.children()[i].@state=="checked")){
                        result+=xml.children()[i].@label+"\n";
                    }
                    var oxml:XMLList=new XMLList(xml.children()[i].toString());
                    if(oxml.children().length()>0){
                        result+=getSelectedChild(oxml);
                    }
                }
                return result;
            }
                  
                  
            protected function queryBranchResult_resultHandler(event:ResultEvent):void
            {
                xmlBank = event.result.toString();
                str=new XMLList(xmlBank);  
                var x:XMLList=str..menuitem as XMLList;
                tree.dataProvider=x;
            }
                  
        ]]>
    </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="cn.ccb.yn.acms.actionscript.TreeCheckBoxRenderer"
                 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()"/>
    <compoent:TreeBank x="570" y="10">
    </compoent:TreeBank>
          
</s:Application>


IT家园
IT家园

网友最新评论 (0)