Flex 树形控件（Tree ）的使用

一、树形控件的常用属性

      1、dragMoveEnabled：是否在拖放的过程中将节点移动，而不是复制。

      2、folderOpenIcon：展开节点时的节点图标

      3、folderClosedIcon：关闭节点时的节点图标

      4、defaultLeafIcon：叶子节点的图标

      5、openItems：在初始化时展开的节点集。

      6、showRoot：是否显示数据中的根节点。XML格式的数据一般包含根节点，此时该属性应为false；Array类型的数据一般不包含根节点，该属性设置无效。

      7、indentation：节点层次缩进量。

      8、doubleClickEnabled：节点是否支持双击事件。

      9、dragEnabled：是否允许拖动节点。

      10、dropEnabled：在拖动节点的过程中是否允许释放，以移动节点。

      11、alternatingItemColors：节点间隔背景色。

      12、labelField：作为标签显示的数据的属性。

      13、labelFunction：自定义节点标签。

 

二、树形控件的常用事件

      1、itemClick：单击节点触发该事件。

      2、itemDoubleClick：双击节点触发该事件。

 

三、范例

 <? xml     version  = "1.0"    encoding  = "utf-8"  ?>
 < mx:Application     xmlns:mx  = "http://www.adobe.com/2006/mxml"    layout  = "absolute"  >
      < mx:Script >
          <![CDATA[
              import mx.events.ListEvent;

              //展开所有节点
              private function openAllNote():void{
                  tree1.openItems = noteList..note;
              }

              //关闭所有节点
              private function closeAllNote():void{
                  tree1.openItems = [];
              }

              private function itemClick(event:Event):void{
                  /*
                  var selectedNote:XML = Tree(event.target).selectedItem as XML;
                  var len:int = selectedNote.child("note").length();
                  if(len>0){
                      txt1.text = "树枝节点";
                  }else{
                      txt1.text = "叶子节点";
                  }
                  */

                  //限制树枝节点不能选择
                  var note:Object = event.currentTarget.selectedItem;
                  if(tree1.dataDescriptor.isBranch(note)){
                      tree1.selectedItem = null;
                      if(tree1.dataDescriptor.hasChildren(note)){
                          txt1.text = [email protected] + "(" + tree1.dataDescriptor.getChildren(note).length + ")";
                      }
                  }else{
                      txt1.text = [email protected];
                  }
              }

              //双击节点时展开或关闭节点
              private function itemDoubleClick(event:ListEvent):void{
                  var note:XML = tree1.selectedItem as XML;
                  tree1.expandItem(note, !tree1.isItemOpen(note));
              }

              //自定义节点标签
              private function labelFunc(note:Object):String{
                  var suffix:String = "";
                  if(tree1.dataDescriptor.hasChildren(note)){
                      suffix = "(" + tree1.dataDescriptor.getChildren(note).length + ")";
                  }
                  return [email protected] + suffix;
              }
          ]]>
      </ mx:Script >

      <!-- 通过样式去掉节点的图标 -->
      < mx:Style >
          Tree {
              folderClosedIcon: ClassReference(null);
              folderOpenIcon: ClassReference(null);
              defaultLeafIcon: ClassReference(null);
          }
      </ mx:Style >

      < mx:XMLList     id  = "noteList"  >
          < note     label  = "root"  >
              < note     label  = "酬金管理"    open  = "true"  >
                  < note     label  = "酬金方案启用"  >
                      < note     label  = "方案启用申请单制作"  />
                      < note     label  = "方案启用申请单审批"  />
                  </ note >
                  < note     label  = "酬金方案查询"  >
                      < note     label  = "方案方案查询"  />
                  </ note >
                  < note     label  = "数据查询"  >
                      < note     label  = "酬金清单查询"  />
                      < note     label  = "网点月度违规情况查询"  />
                      < note     label  = "窜货号码清单"  />
                      < note     label  = "售价违规号码清单"  />
                      < note     label  = "月度酬金计算情况查询"  />
                  </ note >
                  < note     label  = "酬金报表"  >
                      < note     label  = "店面月度酬金统计表"  />
                      < note     label  = "店面月度酬金银行报表"  />
                  </ note >
              </ note >
          </ note >
      </ mx:XMLList >

      <!-- 控制条 -->
      < mx:ApplicationControlBar     dock  = "true"  >
          < mx:Button     label  = "打开所有节点"    click  = "openAllNote()"  />
          < mx:Button     label  = "关闭所有节点"    click  = "closeAllNote()"  />
          < mx:Text     width  = "384"    fontSize  = "12"    color  = "#FCFEFE"    fontWeight  = "bold"    id  = "txt1"  />
      </ mx:ApplicationControlBar >

      < mx:Panel     x  = "10"    y  = "10"    width  = "250"    height  = "95%"    layout  = "absolute"    fontSize  = "12"    title  = "树形控件"  >
          < mx:Tree     x  = "0"    y  = "0"    width  = "100%"    height  = "100%"    id  = "tree1"
              labelFunction  = "labelFunc"
              dataProvider  = "{noteList}"
              showRoot  = "false"
              folderOpenIcon  = "@Embed(source='images/tree/open.png')"
              folderClosedIcon  = "@Embed(source='images/tree/close.png')"
              defaultLeafIcon  = "@Embed(source='images/tree/leaf.png')"
              alternatingItemColors  = "[#FFFFFF,#EEEEEE]"
              dragEnabled  = "true"
              dropEnabled  = "true"
              dragMoveEnabled  = "true"
              doubleClickEnabled  = "true"
              itemDoubleClick  = "itemDoubleClick(event)"
              itemClick  = "itemClick(event)"
              indentation  = "15"  />
      </ mx:Panel >

 </ mx:Application >