Flex 4.0中Tree中嵌入CheckBox（实现点击获取值）

本人最近项目中利用Flex4.0实现一个Tree中嵌入Checkbox组件，经过几天的弯路，今天终于实现了小编想要的功能，分享给大家，看代码。

先看看实现的样式吧：

先看MXML中Tree的代码：

                                <mx:Tree id="runStateTree"
					 dataProvider="{myXml}"
					 selectedIndex="0"
					 selectable="true"
					 width="100%"
					 click="getSelectedChild(event)"
					 height="100%"
					 showDataTips="true"
					 change="treeChangeHandle(event)"
					 itemRenderer="cn.com.common.TreeCheckBoxRenderer2"
					 showRoot="false"
					 styleName="Tree"
					 labelField="@label"/>

注意，此Tree中通过TreeCheckBoxRenderer2来渲染这个Tree，使其能够看到Checkbox。其次数据源是从数据库中查找出来的，格式大致如下：

<Root>
   <DEVICE label="XXX家2" MAC="01-20-00-00-82" IP="192.168.0.117" TYPE="CP" STAT="" REL_STAT="" P_ID="" STATUS="2" CHECKED="false" FLAG="1"/>
   <DEVICE label="XXX家1" MAC="01-20-00-00-82" IP="192.168.0.117" TYPE="CP" STAT="" REL_STAT="" P_ID="" STATUS="2" CHECKED="false" FLAG="1"/>
   <DEVICE label="XXX家1" MAC="01-20-00-00-82" IP="192.168.0.117" TYPE="CP" STAT="" REL_STAT="" P_ID="" STATUS="2" CHECKED="false" FLAG="1">
      <DEVICE label="检测器名称1" MAC="E1" IP="192.168.0.1" TYPE="ED" STAT="异常" REL_STAT="" P_ID="A1" STATUS="2" CHECKED="0" FLAG="1"/>
      <DEVICE label="检测器名称9" MAC="E9" IP="192.168.0.1" TYPE="ED" STAT="" REL_STAT="" P_ID="A1" STATUS="2" CHECKED="0" FLAG="1"/>
    </DEVICE>
    <DEVICE label="AP名字6" MAC="A6" IP="192.168.0.8" TYPE="AP" STAT="" REL_STAT="" P_ID="C1" STATUS="2" CHECKED="0" FLAG="1">
      <DEVICE label="AP名字7" MAC="A7" IP="192.168.0.8" TYPE="AP" STAT="" REL_STAT="" P_ID="A6" STATUS="2" CHECKED="0" FLAG="1"/>
    </DEVICE>
   <DEVICE label="栋家" MAC="01-20-00-00-82" IP="192.168.0.117" TYPE="CP" STAT="" REL_STAT="" P_ID="" STATUS="2" CHECKED="false" FLAG="1"/>
 </Root>

其中，我在这个功能中用到的有 CHECKED和FLAG，通过这两个属性来判断，其他属性都是想获取的值。

好，接下来再看Tree的click方法：

/**
 * Tree的点击方法，判断是否选中，并获取相关值
 * */
private function getSelectedChild(event:MouseEvent):void
{
	var obj2:Object;
	//获取点击节点的值
	var selectNode:XML=Tree(event.currentTarget).selectedItem as XML;
	//通过checkbox的selected属性，来改变数据源的checked值，如果checkbox是true，则获取值，FLAG是标识，判断是否是勾选的checkbox还是点击的树
	if (selectNode.@CHECKED == "true" && selectNode.@FLAG == "true")
	{
		obj2=new Object();
		obj2.equname=selectNode.@label;
		obj2.equtype=selectNode.@TYPE;
		obj2.macaddres=selectNode.@MAC;
		obj2.ipaddres=selectNode.@IP;
		array.addItem(obj2);
		//改变FLAG的值，此时checkbox已经是true了，但是如果再次点击树，就需要此属性来判断可不可以在添加值，这里改变后就不可进入此语句块中。
		selectNode.@FLAG="false";
		this.datagrid1.dataProvider=array;
	}
	//checkbox是勾选状态，但此时又点击了Tree，并没有将checkbox状态改变，所以就不进行任何操作（不改变checkbox状态，也不删除页面信息），直接返回。
	else if (selectNode.@CHECKED == "true" && selectNode.@FLAG == "false")
	{
		return;
	}
	//当checkbox变成false时，就需要将页面的值删除掉。
	else
	{
		for (var i:int=0; i < array.length; i++)
		{
			//判断是否相同
			if (selectNode.@MAC == array[i].macaddres)
			{
				//相同直接删除掉
				array.removeItemAt(i);
				selectNode.@FLAG="true";
				return;
			}
		}
	}
}

以上的方法就是对Tree的判断，接下来最重要的看Tree是如何被渲染的。下文中只说明了Checkbox的关键，其他省略。。。。

package cn.com.common
{
	public class TreeCheckBoxRenderer2 extends TreeItemRenderer
	{
		public function TreeCheckBoxRenderer2()
		{
			super();
		}
	         protected var checkBox:Image;

		/**
		 * 构建CheckBox
		 */
		override protected function createChildren():void
		{
			super.createChildren();
			checkBox=new CheckBox();
			addChild(checkBox);
			checkBox.addEventListener(Event.CHANGE, changeHandler);
}

		/**
		 * 点击checkbox时,更新dataProvider
		 * @param event */
		public function changeHandler(event:Event):void
		{
			var obj2:Object;
                      //data就是MXML中的Tree的数据源
                       if (data.@CHECKED != "")
			{
                                 //这里就是这个功能的关键，通过checkbox的状态来给Tree的数据源重新赋值。。。。
                                data.@CHECKED=checkBox.selected.toString();
				data.@FLAG=checkBox.selected.toString();
			}
		}
}


}

好，以上就是小编完成的Tree中带有Checkbox选项的功能，如果想要全代码，到我的资源中去下载吧。