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. PHP 修改配置文件后重启命名

    centosPHP配置文件路径: /etc/php.ini 修改完配置文件后需要重启php服务: systemctl restart php-fpm

  2. C遇到的编译错误整理

    1: Permission denied collect2.exe: error: ld returned exit status c:/mingw/bin/../lib/gcc/mingw32/6. ...

  3. Thinkphp5.1源码阅读

    主要流程 1 \public\index.php require __DIR__ . '/../thinkphp/start.php'; \thinkphp\start.php require __D ...

  4. Python Base Five

    // 8 day(2016/8/11) 38. In python , it is oop. class Baskball:         def setName(self, name):      ...

  5. 【前端学习笔记】2015-09-10~~~~ css层叠样式表~~格式

    关于颜色的定义: 有几种方式:1.直接接英文单词   2.#16进制  3.rgb(100%:0%:0%)或者里面写像素,此处百分号不能省略. 加多个属性时,用“;”分开 前面如果是定义标签的样式时, ...

  6. 喵星球上的点名(bzoj 2754)

    Description a180285幸运地被选做了地球到喵星球的留学生.他发现喵星人在上课前的点名现象非常有趣.   假设课堂上有N个喵星人,每个喵星人的名字由姓和名构成.喵星球上的老师会选择M个串 ...

  7. 挑战程序设计2 KD树

    Range Query - Range Search (kD Tree) Time Limit : 1 sec, Memory Limit : 262144 KB Japanese version i ...

  8. 【BZOJ2286】消耗战(虚树,DFS序,树形DP)

    题意:一棵N个点的树上有若干个关键点,每条边有一个边权,现在要将这些关键点到1的路径全部切断,切断一条边的代价就是边权. 共有M组询问,每组询问有k[i]个关键点,对于每组询问求出完成任务的最小代价. ...

  9. xml文档绑定某个属性值到treeview算法

    原文发布时间为:2008-08-10 -- 来源于本人的百度文章 [由搬家工具导入] using System.Xml; protected void Button2_Click(object sen ...

  10. C/C++ XMPP/Jabber 客户端类库对比/点评 (转)

    原文转自 http://blog.csdn.net/educast/article/details/31359835 1.gloox Ans. 老牌库,推荐 gloox是一个稳定功能完整的XMPP客户 ...