树的实现-flex

TreeCheckBoxRender.as

 

package model
{
 import flash.events.Event;
 
 import mx.controls.CheckBox;
 import mx.controls.treeClasses.TreeItemRenderer;
 import mx.controls.treeClasses.TreeListData;

    /**
    *  支持CheckBox的TreeItemRenderer
    * @author jun
    * 
    */
 public class TreeCheckBoxRender extends TreeItemRenderer
 {
  public function TreeCheckBoxRender()
  {
   super();
  }
  
  /**
   * 表示checkBox控件从data中所取数据的字段
   */
  private var _selectedField:String = "selected";
  
  protected var checkBox:CheckBox;
  
  /**
   * 构建checkBox
   */
  override protected function createChildren():void {
   super.createChildren();
   
   checkBox = new CheckBox();
   
   addChild(checkBox);
   
   checkBox.addEventListener(Event.CHANGE,changeHandler);
  }
  
  /**
   * 点击checkbox时，更新dataProvider
   */
  protected function changeHandler(event:Event):void {
   if(data && data[_selectedField] != undefined) {
    data[_selectedField] = checkBox.selected;
   }
  }
  
  /**
   * 初始化控件时，给checkBox赋值
   */
  override protected function commitProperties():void {
   super.commitProperties();
   trace(data[_selectedField]);
   if(data && data[_selectedField] != undefined) {
    checkBox.selected = data[_selectedField];
   } else {
    checkBox.selected = false;
   }
  }
  
  /**
   * 重置itemRenderer宽度
   */
  override protected function measure():void {
   super.measure();
   measuredWidth += checkBox.getExplicitOrMeasuredWidth();
  }
  
  /**
   * 重新排列位置，将label后移
   */
  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();
 }
 }
}

 

 

 

Tree.mxml

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">
 <mx:Script>
  <!--[CDATA[
   import mx.collections.ArrayCollection;
   public var collection:ArrayCollection = new ArrayCollection([
      {"name" : "上海", "selected":false, "children":[
              {"name":"黄浦", "selected":false },
              {"name":"浦东", "selected":true },
              {"name":"静安", "selected":false },
              { "name":"徐汇", "selected":false }
      ]},
      {"name":"北京", "selected":false,"children":[
              {"name":"海淀", "selected":false },
              { "name":"朝阳", "selected":true },
              {"name":"丰台", "selected":false } ]}
      ]);
  ]]-->
 </mx:Script>
 
 <mx:Tree width="300" height="500" labelField="name"
     itemRenderer="model.TreeCheckBoxRender" dataProvider="{collection}"/>
</mx:Application>

 

 

运行后效果：