flex树形选择用户的实现

使用flex tree 和list实现如下选择用户的效果

效果图

 

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
                showCloseButton="true" creationComplete="loadMenu()"
                close="closeWindow()" styleName="customPopUp"  width="608" height="482"
                horizontalAlign="center" title="选择系统用户:">
    <mx:Style source="./css/cssblue.css"/>


    <mx:Script>
<![CDATA[

        import comas.base.common.Globa;

        import mx.controls.Alert;
        import mx.managers.PopUpManager;

        import comas.base.common.HttpUtil;

        import mx.rpc.events.ResultEvent;
        import mx.utils.StringUtil;
        import mx.events.ToolTipEvent;
        import mx.controls.ToolTip;
        import mx.events.ValidationResultEvent;
        import mx.collections.ArrayCollection;

 


        [Bindable]
        public var returnFunction:Function;
        public var tracerObject:Object;
        public var initUsers:String;

      
        private function doSubmit():void
        {
         var users:String="";
         for(var i:int = 0;i<selectusersArray.length;i++){
         users=users+selectusersArray[i].@loginname+";";
      }
            returnFunction(users,tracerObject);
            closeWindow();
        }
         private function closeWindow():void
        {
            PopUpManager.removePopUp(this);
        }//closeWindow

               
        //----------load menu data
        [Bindable] var unitdata:XML;
        public function loadMenu():void {
            mx.managers.CursorManager.setBusyCursor();
            var httputil:HttpUtil = new HttpUtil();
            httputil.loadXML(unittreeLoaded, "/jsp/fadmin/sysunitAction.jsp", "action=listAllUser");
        }

        private function unittreeLoaded(event:ResultEvent):void {
            unitdata = new XML(event.result.toString());
            tree_unit.dataProvider = unitdata.children();
            mx.managers.CursorManager.removeBusyCursor();
           
            tree_unit.callLater(expandTree);
        }

  private function expandTree():void{
   tree_unit.expandChildrenOf(unitdata , true);
  }

        //
        [Embed(source='images/icon/udepart.gif')]
        private var departIcon:Class;
        [Embed(source='images/icon/unit.gif')]
        private var unitIcon:Class;
        [Embed(source='images/icon/user.gif')]
        private var userIcon:Class;
        //------------

        function uniticonFun(item:Object) {
            var isdepart:String = item.attribute("isdepart");
            if (isdepart == "1")
                return departIcon;
            else if (isdepart == "0")
                return unitIcon;
             else if (isdepart == "2")
                return userIcon;

        }
        //--------
        [Bindable] public var selectusersArray:ArrayCollection=new ArrayCollection();
       
        public function doselectME(event:Event):void{
         var sel:XML=tree_unit.selectedItem as XML;
         var isUser:Boolean=sel.@isdepart=='2';
         if(!isUser)
          doselectBMME(event);
         else
    addOneToList(sel);
        }
       
        function addOneToList(item:XML):void{
         var isUser:Boolean=item.@isdepart=='2';
   if(!isUser) return;
      if(selectusersArray.contains(item)) return;
      //add to MXList
   selectusersArray.addItem(item);
         
        }
       
        //双击选择部门
        function doselectBMME(event:Event):void{
         //Alert.show("1");
         var sel:XML=tree_unit.selectedItem as XML;
//         var isUser:Boolean=sel.@isdepart=='2';
//         if(isUser) return;
         
         for each (var item:XML in sel.children())
   {
     addOneToList(item);
   }
        }


       public function removeSelect(){
         if(selectList.selectedItem == null) return;
      for(var i:int = 0;i<selectusersArray.length;i++){
       if(selectusersArray[i] == selectList.selectedItem){
         selectusersArray.removeItemAt(i);
       }
      }
        }


        public function initUser():void {
//           var  i_users:Array=initUsers.split(";")   ;
//           for(var i:int=0;i<i_users.length;i++){
//               //i_users[i];
//           }
        }
              

]]>
</mx:Script>

    <mx:VBox height="100%" width="100%" color="#000033">
       
        <mx:HBox width="100%" height="26">
           <mx:TextInput width="209" text="关键字" />
           <mx:Button label="" styleName="BtnFind" width="38"/>
           <mx:Label text="   已选择用户列表:" selectable="true"/>
        </mx:HBox>
        <mx:HBox width="100%" height="100%" verticalAlign="middle">
            <mx:Tree  width="45%" height="100%" id="tree_unit" styleName="TreeDaohang" labelField="@name"
                     iconFunction="uniticonFun" click="doselectME(event)" allowMultipleSelection="true"
                     useHandCursor="true" alternatingItemColors="[#FFFFFF, #E2DDDD]"   doubleClick="doselectBMME(event)"></mx:Tree>
            <mx:Image source="./images/icon/arrow_left.gif"/>
            <mx:VBox height="100%" width="55%">
                <mx:List id="selectList" height="100%" width="100%" dataProvider="{selectusersArray}" labelField="name" alternatingItemColors="[#F6F7F9, #EEECF4]">
                 <mx:itemRenderer> 
                       <mx:Component> 
                        <mx:HBox width="100%" horizontalAlign="left" >
                         <mx:Image  height="20" source="./images/icon/login.gif"/>
                         <mx:Label height="20" width="100%" selectable="true" text="{data.@loginname}/{data.@name}"/>
                         <mx:LinkButton height="20"  styleName="BtnDel" label=""  click="outerDocument.removeSelect()"/> 
                        </mx:HBox> 
                       </mx:Component> 
                   </mx:itemRenderer> 
                </mx:List>
            </mx:VBox>
        </mx:HBox>

    </mx:VBox>

    <mx:ControlBar width="100%" height="45" verticalAlign="top" horizontalAlign="right">
        <mx:Button useHandCursor="true" buttonMode="true" id="btnsub" label="确定" height="28" click="doSubmit()" styleName="BtnAdd"
          />
        <mx:Button useHandCursor="true" buttonMode="true" label="取消" height="28" styleName="BtnCancel"
                   click="PopUpManager.removePopUp(this)"/>
    </mx:ControlBar>

</mx:TitleWindow>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值