Tree渲染全选的checkbox(选中给其checkbox加个图片)

本文介绍了一个使用Flex框架实现的CheckBoxTree组件,该组件通过Tree和CheckBox的结合,实现了节点的勾选功能,并且能够自动更新父节点和子节点的状态。代码中详细展示了如何创建XML数据结构来组织树形结构的数据,以及如何定制渲染器以实现特定的显示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主程序:CheckBoxAndTree

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.List;
public var folderList:XMLList = <>
<folder state="unchecked" label="Marketing Collateral" isBranch="true">
<folder state="unchecked" isBranch="true" label="Media,PR,andCommunications">
<folder state="unchecked" isBranch="false" label="ArticleReprintDisclaimers"/>
<folder state="unchecked" isBranch="false" label="Articles Reprints" />
<folder state="unchecked" isBranch="false" label="InterviewsandTranscripts"/>
<folder state="unchecked" isBranch="false" label="Press Kits"/>
<folder state="unchecked" isBranch="false" label="PressReleases"/>
<folder state="unchecked" isBranch="false" label="QuickHits"/>
<folder state="unchecked" isBranch="false" label="Rep Talking Points"/>
<folder state="unchecked" isBranch="false" label="Special Updates"/>
<folder state="unchecked" isBranch="false" label="WhitePapers"/></folder>
<folder state="unchecked" isBranch="true" label="FormsandApplications">
<folder state="unchecked" isBranch="false" label="Applications" />
<folder state="unchecked" isBranch="false" label="Forms"/>
</folder>
</folder>
</>;

[Bindable]
public var folderCollection:XMLListCollection;
private function init():void{
folderCollection =new XMLListCollection(folderList);
checkTree.dataProvider= folderCollection;
}
]]>
</mx:Script>
<mx:Tree id="checkTree" x="10" y="0" itemRenderer="CheckTreeRenderer" width="100%" height="355" labelField="@label" ></mx:Tree>
<mx:Canvas x="37" y="363" width="200" height="200">
<mx:CheckBox x="76" y="37" label="Checkbox" borderColor="#3A0A3D" themeColor="#BE1940" color="#D69B1D" fillColors="[#C71A1A, #C71A1A]"/>
</mx:Canvas>

</mx:Application>

渲染器:CheckTreeRenderer

package
{
import flash.events.MouseEvent;

import mx.collections.ICollectionView;
import mx.collections.IViewCursor;
import mx.controls.CheckBox;
import mx.controls.Image;
import mx.controls.Tree;
import mx.controls.treeClasses.ITreeDataDescriptor;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;

public class CheckTreeRenderer extends TreeItemRenderer
{

protected var myImage:Image;
protected var myCheckBox:CheckBox;
private var imageWidth:Number = 6;
private var imageHeight:Number = 6;
private var inner:String = "images.jpeg";
static private var STATE_SCHRODINGER:String = "schrodinger";
static private var STATE_CHECKED:String = "checked";
static private var STATE_UNCHECKED:String = "unchecked";
public function CheckTreeRenderer()
{
super();
}
private function toggleParents(item:Object,tree:Tree,state:String):void{
if(item==null){
return ;
}else{
item.@state=state;
toggleParents(tree.getParentItem(item),tree,getState(tree,tree.getParentItem(item)));
}
}

private function toggleChildren(item:Object,tree:Tree,state:String):void{
if(item==null){
return;
}else{
item.@state=state;
var treeData:ITreeDataDescriptor = tree.dataDescriptor;
if(treeData.hasChildren(item)){
var children:ICollectionView =treeData.getChildren(item);
var cursor:IViewCursor =children.createCursor();
while(!cursor.afterLast){
toggleChildren(cursor.current,tree,state);
cursor.moveNext();
}
}
}

}
private function getState(tree:Tree, parent:Object):String {
var noChecks:int = 0;
var noCats:int = 0;
var noUnChecks:int = 0;
if (parent != null ) {
var treeData:ITreeDataDescriptor = tree.dataDescriptor;
var cursor:IViewCursor = treeData.getChildren(parent).createCursor();
while (!cursor.afterLast) {
if (cursor.current.@state == STATE_CHECKED){
noChecks++;
}else if (cursor.current.@state == STATE_UNCHECKED) {
noUnChecks++
}else {
noCats++;
}
cursor.moveNext();
}
}
if ((noChecks > 0 && noUnChecks > 0) || (noCats > 0 && noChecks>0)) {
return STATE_SCHRODINGER;
} else if (noChecks > 0) {
return STATE_CHECKED;
} else {
return STATE_UNCHECKED;
}
}
private function imageToggleHandlder(event:MouseEvent):void {
myCheckBox.selected = !myCheckBox.selected;
checkBoxToggleHandler(event);
}
private function checkBoxToggleHandler(event:MouseEvent):void {
if (data) {
var myListData:TreeListData = TreeListData(this.listData);
var selectedNode:Object = myListData.item;
var tree:Tree = Tree(myListData.owner);
var toggle:Boolean = myCheckBox.selected;
if (toggle) {
toggleChildren(data, tree, STATE_CHECKED);
} else {
toggleChildren(data, tree, STATE_UNCHECKED);
}
var parent:Object = tree.getParentItem (data);
toggleParents (parent, tree, getState (tree, parent));
}
}

override protected function createChildren():void {
super .createChildren();
myCheckBox = new CheckBox();

myCheckBox.setStyle( "verticalAlign" , "middle" );
myCheckBox.addEventListener( MouseEvent.CLICK, checkBoxToggleHandler );
addChild(myCheckBox);
myImage = new Image();
myImage.source = inner;
myImage.visible=false;
myImage.width=200;
myImage.height=200;
myImage.addEventListener( MouseEvent.CLICK, imageToggleHandlder );
myImage.setStyle( "verticalAlign" , "middle" );
/*加图片*/
//addChild(myImage);
}

private function setCheckState (checkBox:CheckBox, value:Object, state:String):void {
if (state == STATE_CHECKED) {
checkBox.selected = true ;
}
else if (state == STATE_UNCHECKED) {
checkBox.selected = false ;
}
else if (state == STATE_SCHRODINGER) {
checkBox.selected = false ;
}
}
override public function set data(value:Object):void {
if (value != null ) {
super .data = value;
setCheckState (myCheckBox, value, value.@state);

trace(TreeListData(super .listData).item.@type);

trace(value.toString());
trace(TreeListData(super .listData))
var a:String=TreeListData(super .listData).item.@type;
trace(TreeListData(super .listData).item.@type);
trace("#######################################");

if (TreeListData(super .listData).item.@type == 'dimension' ) {

} else {
if (this .parent != null ) {
var _tree:Tree = Tree(this .parent.parent);
_tree.setStyle("defaultLeafIcon" , null );
}
}
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super .updateDisplayList(unscaledWidth, unscaledHeight);
if (super .data) {
if (super .icon != null ) {
myCheckBox.x = super .icon.x;
myCheckBox.y = 2;
super .icon.x = myCheckBox.x + myCheckBox.width + 17;
super .label.x = super .icon.x + super .icon.width + 3;
} else {
myCheckBox.x = super .label.x;
myCheckBox.y = 2;
super .label.x = myCheckBox.x + myCheckBox.width + 17;
}
if (data.@state == STATE_SCHRODINGER) {
myCheckBox.setStyle("fillColors",new Array("block","block","block","block"));
myImage.x = myCheckBox.x+2 ;
myCheckBox.selected=true;
myImage.y = myCheckBox.y+5;
/*fillColors="[#1C5C93, #FFFFFF]" */
myImage.width = 10;
myImage.height = 10;
myImage.visible=true;
} else {
myImage.x = 0;
myImage.y = 0;
myImage.width = 10;
myImage.height = 10;
myImage.visible=false;
myCheckBox.setStyle("fillColors", new Array("#FFFFFF","#FFFFFF","#FFFFFF","#FFFFFF"));
}
}
}
}}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值