在Tree组件上添加CheckBox组件

网上遇到很多需要在Tree控件添加CheckBox等控件的问题，本以为把Tree的itemRenderer设置成mx.controls.CheckBox 就可以完事了，但是试了之后才发现没有这么简单 . . .

Tree在初始化的时候默认给自己设置itemRenderer属性。此属性值也是Flex现成的：mx.controls.treeClasses.TreeItemRenderer。 它内部分为三部分：1，icon也是就三角形的小图标。2，disclosureIcon文件夹图标。3，label显示的文字. 我只要在label前面加上一个CheckBox就行了。

于是写了一个类:TreeCheckBoxRenderer继承mx.controls.treeClasses.TreeItemRenderer源码如下：

 

package org.control{import flash.events.Event;import mx.controls.CheckBox;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中所取数据的字段 */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 * @param event */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后移 * @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();}}}

 

在页面中的使用方法，如下：

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] public var collection:ArrayCollection = new ArrayCollection([ { "name" : "上海", "selected":false, "children":[ { "name":"黄浦", "selected":false }, { "name":"浦东", "selected":true }, { "name":"静安", "selected":false }, { "name":"徐汇", "selected":false } ]}, { "name":"北京", "selected":false, "children":[ { "name":"海淀", "selected":false }, { "name":"朝阳", "selected":true }, { "name":"丰台", "selected":false } ]} ]); ]]--> </mx:Script> <mx:Tree width="300" height="500" labelField="name" itemRenderer="org.control.TreeCheckBoxRenderer" dataProvider="{collection}"/> </mx:Application>

 

注意：selected属性很重要，此属性在数据源内，标致当前节点的CheckBox是否选中。点击CheckBox会自动改变响应的数据源。 如果想知道哪些被选中的话, 就遍历Tree的dataProvider

 

效果图如下：