hanyeah

原文链接：http://blog.csdn.net/songanling/article/details/39372027?utm_source=tuicool

效果如图：全选和半选状态，Checkbox的flex3的样式用的图片

TreeCheckboxItemRender.mxml

[Event(name="checkBoxClick",type="CustomEvent")]@namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    .halfSelected{
      upIcon:Embed(source='1.png');
      overIcon:Embed(source='1.png');
      downIcon:Embed(source='1.png');
      disabledIcon:Embed(source='1.png');
    }
    .selected{
      upIcon:Embed(source='4.png');
      overIcon:Embed(source='4.png');
      downIcon:Embed(source='4.png');
      disabledIcon:Embed(source='4.png');
    }
    .unSelected{
      upIcon:Embed(source='2.png');
      overIcon:Embed(source='3.png');
      downIcon:Embed(source='3.png');
      disabledIcon:Embed(source='2.png');
    }<![CDATA[
      
      import mx.controls.Tree;
      import mx.events.FlexEvent;
      [Bindable]
      [Embed(source="1.png")]
      public static var HARFSELECT_CLASS:Class;
      [Bindable]
      [Embed(source="2.png")]
      public static var UNSELECT_CLASS:Class;
      [Bindable]
      [Embed(source="3.png")]
      public static var UNSELECT_OVER_CLASS:Class;
      [Bindable]
      [Embed(source="4.png")]
      public static var SELECT_CLASS:Class;
      override protected function commitProperties():void
      {
        super.commitProperties();
        if(data != null && data.@selected != ""){
          if(data.children().length() == 0){
            if(data.@selected == "true"){
              checkBox.selected = true;
            } else{
              checkBox.selected = false;
            }
            return;
          }
          recursion(data);
        } else{
          checkBox.selected = false;
        }
      }
      
      private function recursion(dataItem:Object):void{
        //遍历所有子节点，如果子节点下还有子节点则递归
        for(var i:int = 0; i < dataItem.children().length(); i++){
          var child:XML = dataItem.children()[i];
          if(child.children().length() > 0){
            recursion(child);
          }
        }
        //查询该节点下的选中的子节点
        var selectedChild:XMLList = dataItem..node.(@pid == dataItem.@id && @selected == "true");
        var selectElement:XMLList = dataItem..node.(@selected == "true");
        //如果该节点的子节点数等于该节点下选中的子节点数，则该节点选中
        if(dataItem.children().length() == selectedChild.length()){
          checkBox.selected = true;
          dataItem.@selected = "true";
          fillCheckBox(false);
        } else{
          checkBox.selected = false;
          fillCheckBox(false);
          if(selectElement.length() > 0){
            fillCheckBox(true);
          }
        }
      }
      
      protected function checkBox_changeHandler(event:Event):void
      {
        if(data.@selected != ""){
          toggleChildrens(data);
          toggleParents(data, Tree(this.owner));
        }
        
      }
      
      private function toggleChildrens(item:Object):void{
        item.@selected = checkBox.selected;
        for(var i:int = 0; i < item.children().length(); i++){
          item.children()[i].@selected = checkBox.selected;
          toggleChildrens(item.children()[i]);
        }
      }
  
      /**
       * // TODO : 递归设置父项目的状态
       * @param item 项目
       * @param tree 树对象
       * @param state 目标状态
       *
       */
      private function toggleParents(item:Object, tree:Tree):void
      {
        if (item == null)
          return ;
        else
        {
        var parentItem:Object=tree.getParentItem(item);
        if(parentItem != null){
            if(item.@selected == "false"){
              parentItem.@selected = "false";
            }else{
              var flag:int = 0;
              for(var i:int = 0; i < parentItem.children().length(); i++){
                if(parentItem.children()[i].@selected == "true"){
                  flag++;
                }
              }
              if(flag == parentItem.children().length()){
                parentItem.@selected = "true";
              }
            }
            toggleParents(parentItem, tree);
          }
        }
      }
      
      protected function fillCheckBox(isFill:Boolean):void
      {
        checkBox.graphics.clear();
        if (isFill)
        {
          var myRect:Rectangle=checkBox.getBounds(checkBox);
          checkBox.graphics.beginFill(0xff0000, 1)
          checkBox.graphics.drawRoundRect(myRect.x+3, myRect.y+3, checkBox.width/2, checkBox.height/2, 1, 1);
          checkBox.graphics.endFill();
          checkBox.styleName = "halfSelected";
        } else{
          if(checkBox.selected){
            checkBox.styleName = "selected";
          } else{
            checkBox.styleName = "unSelected";
          }
        }
      }
      
      protected function mxtreeitemrenderer1_initializeHandler(event:FlexEvent):void
      {
        // TODO Auto-generated method stub
        //Tree(this.owner)
      }
      
      protected function checkBox_clickHandler(event:MouseEvent):void
      {
        // TODO Auto-generated method stub
        Tree(this.owner).dispatchEvent(new CustomEvent(CustomEvent.CHECKBOX_CLICK, {"selected":checkBox.selected}));
      }
      
    ]]>

主文件

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"          xmlns:s="library://ns.adobe.com/flex/spark"          xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="com.pricklythistle.common.components.*">  <fx:Declarations>    <!-- 将非可视元素（例如服务、值对象）放在此处 -->    <fx:XML xmlns="" id="xmlData">      <node id="0" pid="-1" label="厦门" openedId="-1" type="-1" cid="0" selected="false" isBranch="true">        <node id="110" pid="0" selected="false" cid="0" isBranch="true" type="2" updateStatus="1" label="软件园演示点2" createTime="1404267128253" updateTime="1404267128253" icon="">          <node id="362" pid="110" selected="false" cid="110" label="望海路（720P－变码率）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404268448260" updateTime="1404268514558" icon=""/>          <node id="360" pid="110" selected="false" cid="110" label="电梯间（720P－变码率）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="1" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404268305648" updateTime="1404268724984" icon=""/>          <node id="359" pid="110" selected="false" cid="110" label="办公室（720P－变码率）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404268247553" updateTime="1404268725016" icon=""/>          <node id="361" pid="110" selected="false" cid="110" label="停车场（720P－变码率）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404268394947" updateTime="1410789105184" icon=""/>        </node>        <node id="101" pid="0" cid="0" selected="false" isBranch="true" type="2" updateStatus="1" label="软件园演示点（户外）" createTime="1404121845986" updateTime="1408623064915" icon="">          <node id="357" pid="101" selected="false" cid="101" label="三叉路口（720P-均衡）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>          <node id="356" pid="101" selected="false" cid="101" label="停车场（720P-高清）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355717" updateTime="1410773658118" icon=""/>          <node id="358" pid="101" selected="false" cid="101" label="办公室（720P-流畅）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404182528941" updateTime="1410773894041" icon=""/>          <node id="355" pid="101" selected="false" cid="101" label="球机（720P-可云台控制）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355654" updateTime="1410779974117" icon=""/>          <node id="354" pid="101" selected="false" cid="101" label="望海路（720P-流畅）" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355592" updateTime="1410787537718" icon=""/>          <node id="222" pid="101" cid="0" selected="false" isBranch="true" type="2" updateStatus="1" label="软件园二期演示点（户外）" createTime="1404121845986" updateTime="1408623064915" icon="">            <node id="200" pid="222" selected="false" cid="222" label="观日路" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>            <node id="201" pid="222" selected="false" cid="222" label="公厕" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>            <node id="202" pid="222" selected="false" cid="222" label="景观湖" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>          </node>          <node id="333" pid="101" cid="0" selected="false" isBranch="true" type="2" updateStatus="1" label="软件园一期演示点（户外）" createTime="1404121845986" updateTime="1408623064915" icon="">            <node id="210" pid="333" selected="false" cid="222" label="十字路口" isBranch="false" updateStatus="1" channelValue="1" isOffLine="false" isPlaying="false" channelStatus="0" xCoordinate="0.0" yCoordinate="0.0" overdueStatus="1" createTime="1404131355779" updateTime="1410773639789" icon=""/>          </node>        </node>      </node>    </fx:XML>  </fx:Declarations>  <fx:Script>    <![CDATA[                ]]>  </fx:Script>    <mx:Tree id="tree" dataProvider="{xmlData}" styleName="treeStyle" horizontalCenter="0" width="270" height="100%"       itemRenderer="TreeCheckboxItemRender" labelField="@label"/>	</s:Application>

说明：在xml文件中主要的两个属性就是pid和selected属性，pid就是父ID，selected代表是否选中，如果为true初始化的时候就选中，我在Itemrender中是用这两个属性来判断 这三个状态的