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选项的功能，如果想要全代码，到我的资源中去下载吧。