flex树形选择用户的实现

来源：互联网发布：win10卡顿如何优化编辑：程序博客网时间：2024/04/28 15:56

使用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>