树的实现-flex

最新推荐文章于 2024-11-06 16:08:53 发布

原创最新推荐文章于 2024-11-06 16:08:53 发布 · 762 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #application #import #encoding #layout #tree

flex 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在Flex中实现带有CheckBox的Tree组件的方法。通过自定义TreeItemRenderer，可以在每个Tree节点旁边添加CheckBox，实现节点的选择状态控制，并且能够同步更新数据提供者中的选择状态。

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

TreeCheckBoxRender.as

package model { import flash.events.Event; import mx.controls.CheckBox; import mx.controls.treeClasses.TreeItemRenderer; import mx.controls.treeClasses.TreeListData; /** * 支持CheckBox的TreeItemRenderer * @author jun * */ public class TreeCheckBoxRender extends TreeItemRenderer { public function TreeCheckBoxRender() { super(); } /** * 表示checkBox控件从data中所取数据的字段 */ private var _selectedField:String = "selected"; protected var checkBox:CheckBox; /** * 构建checkBox */ override protected function createChildren():void { super.createChildren(); checkBox = new CheckBox(); addChild(checkBox); checkBox.addEventListener(Event.CHANGE,changeHandler); } /** * 点击checkbox时，更新dataProvider */ protected function changeHandler(event:Event):void { if(data && data[_selectedField] != undefined) { data[_selectedField] = checkBox.selected; } } /** * 初始化控件时，给checkBox赋值 */ override protected function commitProperties():void { super.commitProperties(); trace(data[_selectedField]); if(data && data[_selectedField] != undefined) { checkBox.selected = data[_selectedField]; } else { checkBox.selected = false; } } /** * 重置itemRenderer宽度 */ override protected function measure():void { super.measure(); measuredWidth += checkBox.getExplicitOrMeasuredWidth(); } /** * 重新排列位置，将label后移 */ 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(); } } }

Tree.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12"> <mx:Script>  </mx:Script> <mx:Tree width="300" height="500" labelField="name" itemRenderer="model.TreeCheckBoxRender" dataProvider="{collection}"/> </mx:Application>

运行后效果：