Flex 4.0中Tree中嵌入CheckBox(实现点击获取值)
发布时间:2020-12-15 04:25:50 所属栏目:百科 来源:网络整理
导读:本人最近项目中利用Flex4.0实现一个Tree中嵌入Checkbox组件,经过几天的弯路,今天终于实现了小编想要的功能,分享给大家,看代码。 先看看实现的样式吧: 先看MXML中Tree的代码: mx:Tree id="runStateTree" dataProvider="{myXml}" selectedIndex="0" sele
本人最近项目中利用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选项的功能,如果想要全代码,到我的资源中去下载吧。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |