您的位置: 首页  >  文章  >  Flex 树形控件（Tree ）的使用

Flex 树形控件（Tree ）的使用

分类: 文章 • 2023-03-11 09:14:10

一、树形控件的常用属性

      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代码
  1. <? xml version = "1.0" encoding = "utf-8" ?>   
  2. < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" >   
  3.      < mx:Script >   
  4.          <![CDATA[
  5.              import mx.events.ListEvent;
  6.             
  7.              //展开所有节点
  8.              private function openAllNote():void{
  9.                  tree1.openItems = noteList..note;
  10.              }
  11.             
  12.              //关闭所有节点
  13.              private function closeAllNote():void{
  14.                  tree1.openItems = [];
  15.              }
  16.             
  17.              private function itemClick(event:Event):void{
  18.                  /*
  19.                  var selectedNote:XML = Tree(event.target).selectedItem as XML;
  20.                  var len:int = selectedNote.child("note").length();
  21.                  if(len>0){
  22.                      txt1.text = "树枝节点";
  23.                  }else{
  24.                      txt1.text = "叶子节点";
  25.                  }
  26.                  */
  27.                 
  28.                  //限制树枝节点不能选择
  29.                  var note:Object = event.currentTarget.selectedItem;
  30.                  if(tree1.dataDescriptor.isBranch(note)){
  31.                      tree1.selectedItem = null;
  32.                      if(tree1.dataDescriptor.hasChildren(note)){
  33.                          txt1.text = [email protected] + "(" + tree1.dataDescriptor.getChildren(note).length + ")";
  34.                      }
  35.                  }else{
  36.                      txt1.text = [email protected];
  37.                  }
  38.              }
  39.             
  40.              //双击节点时展开或关闭节点
  41.              private function itemDoubleClick(event:ListEvent):void{
  42.                  var note:XML = tree1.selectedItem as XML;
  43.                  tree1.expandItem(note, !tree1.isItemOpen(note));
  44.              }
  45.             
  46.              //自定义节点标签
  47.              private function labelFunc(note:Object):String{
  48.                  var suffix:String = "";
  49.                  if(tree1.dataDescriptor.hasChildren(note)){
  50.                      suffix = "(" + tree1.dataDescriptor.getChildren(note).length + ")";
  51.                  }
  52.                  return [email protected] + suffix;
  53.              }
  54.          ]]>   
  55.      </ mx:Script >   
  56.        
  57.      <!-- 通过样式去掉节点的图标 -->   
  58.      < mx:Style >   
  59.          Tree {   
  60.              folderClosedIcon: ClassReference(null);   
  61.              folderOpenIcon: ClassReference(null);   
  62.              defaultLeafIcon: ClassReference(null);   
  63.          }   
  64.      </ mx:Style >   
  65.   
  66.      < mx:XMLList id = "noteList" >   
  67.          < note label = "root" >   
  68.              < note label = "酬金管理" open = "true" >   
  69.                  < note label = "酬金方案启用" >   
  70.                      < note label = "方案启用申请单制作" />   
  71.                      < note label = "方案启用申请单审批" />   
  72.                  </ note >   
  73.                  < note label = "酬金方案查询" >   
  74.                      < note label = "方案方案查询" />   
  75.                  </ note >   
  76.                  < note label = "数据查询" >   
  77.                      < note label = "酬金清单查询" />   
  78.                      < note label = "网点月度违规情况查询" />   
  79.                      < note label = "窜货号码清单" />   
  80.                      < note label = "售价违规号码清单" />   
  81.                      < note label = "月度酬金计算情况查询" />   
  82.                  </ note >   
  83.                  < note label = "酬金报表" >   
  84.                      < note label = "店面月度酬金统计表" />   
  85.                      < note label = "店面月度酬金银行报表" />   
  86.                  </ note >   
  87.              </ note >   
  88.          </ note >   
  89.      </ mx:XMLList >   
  90.        
  91.      <!-- 控制条 -->   
  92.      < mx:ApplicationControlBar dock = "true" >   
  93.          < mx:Button label = "打开所有节点" click = "openAllNote()" />   
  94.          < mx:Button label = "关闭所有节点" click = "closeAllNote()" />   
  95.          < mx:Text width = "384" fontSize = "12" color = "#FCFEFE" fontWeight = "bold" id = "txt1" />   
  96.      </ mx:ApplicationControlBar >   
  97.        
  98.      < mx:Panel x = "10" y = "10" width = "250" height = "95%" layout = "absolute" fontSize = "12" title = "树形控件" >   
  99.          < mx:Tree x = "0" y = "0" width = "100%" height = "100%" id = "tree1"   
  100.              labelFunction = "labelFunc"   
  101.              dataProvider = "{noteList}"   
  102.              showRoot = "false"   
  103.              folderOpenIcon = "@Embed(source='images/tree/open.png')"   
  104.              folderClosedIcon = "@Embed(source='images/tree/close.png')"   
  105.              defaultLeafIcon = "@Embed(source='images/tree/leaf.png')"   
  106.              alternatingItemColors = "[#FFFFFF,#EEEEEE]"   
  107.              dragEnabled = "true"   
  108.              dropEnabled = "true"   
  109.              dragMoveEnabled = "true"   
  110.              doubleClickEnabled = "true"   
  111.              itemDoubleClick = "itemDoubleClick(event)"   
  112.              itemClick = "itemClick(event)"   
  113.              indentation = "15" />   
  114.      </ mx:Panel >   
  115.        
  116. </ mx:Application >   

Flex 树形控件（Tree ）的使用

相关推荐