1、新建AS类,用于为Tree生成复选框,及一些选择事件。

package com.th.myUtils
{
import flash.events.Event;
import flash.events.MouseEvent; import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.controls.Tree;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData; /**
* 支持CheckBox的TreeItemRenderer
* @author Montage
*/
public class TreeCheckBoxRenderer extends TreeItemRenderer
{
public function TreeCheckBoxRenderer()
{
super();
} /**
* 表示CheckBox控件从data中所取数据的字段
*/ protected var checkBox:CheckBox; /**
* 构建CheckBox
*/
override protected function createChildren():void
{
super.createChildren();
checkBox = new CheckBox();
addChild( checkBox );
checkBox.addEventListener(Event.CHANGE, changeHandler);
} /**
* 点击checkbox时,更新dataProvider
* @param event
*/
protected function changeHandler( event:Event ):void
{
//var i:int=0;
if( data.@selected!="" )
{
data.@selected= checkBox.selected.toString(); /**
* 如果有需要,在这里处理选中父,全选子节点的方法。
* */
for (var i:int=0;i<data.children().length();i++)
{
data.children()[i].@selected=checkBox.selected.toString();; } }
} /**
* 初始化控件时, 给checkbox赋值
*/
override protected function commitProperties():void
{
super.commitProperties();
if(data.@selected!="" )
{
if(data.@selected=="true"){
checkBox.selected=true;
}else{
checkBox.selected=false;
}
}
else
{
checkBox.selected = false;
} } /**
* 重置itemRenderer的宽度
*/
override protected function measure():void
{
super.measure();
measuredWidth += checkBox.getExplicitOrMeasuredWidth();
} /**
* 重新排列位置, 将label后移
* @param unscaledWidth
* @param unscaledHeight
*/
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();
}
}
}

2、Flex页面代码

<?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">
<fx:Declarations> </fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Tree{
/*去掉默认文件夹图标*/
folderClosedIcon: ClassReference(null);
folderOpenIcon: ClassReference(null); /*去掉叶子节点图标*/
defaultLeafIcon: ClassReference(null); /*
defaultLeafIcon 指定叶图标
disclosureClosedIcon 指定的图标旁边显示一个封闭的分支节点。默认的图标是一个黑色三角形。
disclosureOpenIcon 指定的图标旁边显示一个开放的分支节点。默认的图标是一个黑色三角形。
folderClosedIcon 关闭指定的文件夹图标的一个分支节点。
folderOpenIcon 指定打开的文件夹图标的一个分支节点。
例:三角图标修改如下代码使用即可换成自己的了:
disclosureOpenIcon:Embed(source='images/a.png');
disclosureClosedIcon:Embed(source='images/b.png');
*/
} </fx:Style> <fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var studetXml:XML=
<nj label="一年级" id="n1" lx="0" selected="false">
<bj label="1班" id="b1" lx="1" selected="false">
<student label="刘备" id="s1" lx="2" selected="false"/>
<student label="张飞" id="s2" lx="2" selected="false"/>
<student label="关羽" id="s3" lx="2" selected="false"/>
<student label="诸葛亮" id="s4" lx="2" selected="false"/>
<student label="貂蝉" id="s5" lx="2" selected="false"/>
<student label="吕布" id="s6" lx="2" selected="false"/>
</bj>
</nj>;
private function treeChangeHandle(event:Event):void{
var selectedTreeNode:XML;
selectedTreeNode=Tree(event.target).selectedItem as XML;
} private function test():void{
txtAr.text=getSelectedChild(studetXml);
} private function getSelectedChild(xml:XML):String{
var result:String="";
for(var i:int=0;i<xml.children().length();i++){
if((xml.children()[i].@selected=="true") && (xml.children()[i].@lx=="2")){
result+=xml.children()[i].@label+"\n";
}
var oxml:XML=new XML(xml.children()[i].toString());
if(oxml.children().length()>0){
result+=getSelectedChild(oxml);
}
}
return result;
}
]]>
</fx:Script> <s:Panel x="28" y="20" width="250" height="412" title="所有学生">
<mx:Tree id="tree" top="0" left="0" width="100%" height="100%" labelField="@label"
itemRenderer="com.th.myUtils.TreeCheckBoxRenderer" dataProvider="{studetXml}"
change="treeChangeHandle(event)" styleName="Tree">
</mx:Tree>
</s:Panel>
<s:Panel x="286" y="20" width="250" height="412" title="选中的学生">
<s:TextArea id="txtAr" top="0" left="0" width="100%" height="100%"/>
</s:Panel>
<s:Button x="28" y="454" label="添加选中" click="test()"/> </s:Application>

3、效果图:

 

Flex4_Tree组件2(添加多选框、修改树图标)的更多相关文章

  1. Qt之QHeaderView添加复选框

    简述 前面分享了QTableView中如何添加复选框.本节主要介绍QTableView中的表头-QHeaderView添加复选框的功能,下面以水平表头为例,垂直表头类似! 简述 效果 QHeaderV ...

  2. 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  3. QListWidget的QComboBox下拉列表添加复选框及消息处理

    要在QComboBox下拉列表项中添加复选框,并进行消息处理,在网上搜索了很久没有找到太多有用的信息和实际的例子,但从中还是找到了一些提示性的资料,根据这些简短的介绍,最终实现了这个功能. QComb ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  5. dojo:为数据表格添加复选框

    一.添加复选框 此时应该选用EnhancedGrid,而不是普通的DataGrid.添加复选框需要设置EnhancedGrid的plugins属性,如下: gridLayout =[{ default ...

  6. DateGridView标题列头添加复选框

    第一:添加列标题时,添加两个空格——用于显示复选框: 第二:实现列标题添加复选框,代码如下: private void AddCheckeBoxToDGVHeader(DataGridView dgv ...

  7. Jquery Datatable添加复选框,实现批量操作。

    最近一段时间,一直在写前端的东西,自己也不擅长,最近也有所长进,把工作中用到的一些前端知识整理一下,下次用到就不用再找了.这次主要是在datatable中添加复选框,然后实现批量操作的功能.因为是公司 ...

  8. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

  9. excel添加复选框和去掉复选框

    添加复选框 我测试的excel版本是最新版2016,所有版本都是找开发者工具里面包含很多工具呢,大家可以慢慢测试 excel的右上角 点击文件-->选项-->自定义功能区-->添加开 ...

随机推荐

  1. 使用 D8 分析 javascript 如何被 V8 引擎优化的

    在上一篇文章中我们讲了如何使用 GN 编译 V8 源码,文章最后编译完成的可执行文件并不是 V8,而是 D8.这篇我们讲一下如何使用 D8 调试 javascript 代码. 如果没有 d8,可以使用 ...

  2. SPOJ 3267 D-query(离散化+在线主席树 | 离线树状数组)

    DQUERY - D-query #sorting #tree English Vietnamese Given a sequence of n numbers a1, a2, ..., an and ...

  3. [POJ3728]The merchant(tanrjan_lca + DP)

    传送门 比着题解写还错... 查了两个小时没查出来,心态爆炸啊 以后再查 ——代码(WA) #include <cstdio> #include <cstring> #incl ...

  4. SystemServer分析

    1 SystemServer分析 SystemServer的进程名就是前面所说的“system_server”,是zygote进程“app_process”fork出来的第一个子嗣,其重要性不言而喻. ...

  5. [暑假集训--数位dp]UESTC250 windy数

    windy定义了一种windy数. 不含前导零且相邻两个数字之差至少为22 的正整数被称为windy数. windy想知道,在AA 和BB 之间,包括AA 和BB ,总共有多少个windy数? Inp ...

  6. Linux 虚拟地址与物理地址的映射关系分析【转】

    转自:http://blog.csdn.net/ordeder/article/details/41630945 版权声明:本文为博主(http://blog.csdn.net/ordeder)原创文 ...

  7. 快充 IC BQ25896 的 常用參數

    一: POWER-PATH MANAGEMENT (有接 adapter) 1:Vbat > Vsysmin,Isys = 0A, BATFET disable Vsys = Vbat + 50 ...

  8. PhpStorm配置svn:Can't use Subversion command line client:svn

    Can't use Subversion command line client:svn 感谢: 萌芽的绿豆的文章:https://www.cnblogs.com/yuanchaoyong/p/616 ...

  9. IOS 使用DSYM文件定位Bug 的具体位置

    在项目的开发中,我们通常需要排查和修改测试中和发布后线上的一些bug,现在有一些第三方的bug分享和查找工具SDK,如腾讯的Bugly和听云等,包括苹果的开发工具xcode也自带 bug查找工具.那么 ...

  10. python学习之-- 故障记录汇总

    以下为我编程期间遇到的错误并进行记录,起始时间2017-6-21 时间:2018/11/21问题现象:ajax 执行异步提交后,在访问日志看出现了2次post执行分析:默认ajax提交是执行一次,然后 ...