复写treeItemrenderer 给树形菜单加复选框

 项目中菜单树+复选框的需求，以为像平常的list控件加个itemrender就可以搞定，谁知道不是那么回事。果断baidu。看到有大神写过，果断看tree的源码，发现：

         tree在构造函数中已经默认设置了一个itemrnederer。而且它的itemrenderer和其它的不太一样，包含三个部分：1. 打开/关闭按钮  2. 文件夹图标 3.文本框

         解决方案：

        复写tree的itemrender,源码如下：

        

[java]  view plain copy

1. package com.csms.view.renderers.design  
2. {  
3.     import com.csms.model.vo.DrawingtypeVo;  
4.       
5.     import flash.events.Event;  
6.       
7.     import mx.binding.utils.BindingUtils;  
8.     import mx.collections.ArrayCollection;  
9.     import mx.controls.CheckBox;  
10.     import mx.controls.Tree;  
11.     import mx.controls.treeClasses.TreeItemRenderer;  
12.     import mx.controls.treeClasses.TreeListData;  
13.       
14.     public class TreeCheckBoxRenderer extends TreeItemRenderer      
15.     {      
16.         public function TreeCheckBoxRenderer()      
17.         {      
18.             super();      
19.         }      
20.           
21.           
22.         private var _selectedField:String = "selected";      
23.           
24.         protected var checkBox:CheckBox;      
25.           
26.           
27.         override protected function createChildren():void     
28.         {      
29.             super.createChildren();      
30.             if(!checkBox){  
31.                 checkBox = new CheckBox();      
32.                 addChild( checkBox );      
33.                 checkBox.addEventListener(Event.CHANGE, changeHandler);      
34.             }  
35.         }      
36.           
37.         /** 
38.          * 复选框变化事件，绑定子级 
39.          * */  
40.         protected function changeHandler( event:Event ):void     
41.         {      
42.             trace(checkBox.selected);  
43.             if( data && data[_selectedField] != undefined )      
44.             {     
45.                 data[_selectedField] = checkBox.selected;  
46.                 trace("data[_selectedField]" +  checkBox.selected);  
47.                 bindChilren(data as DrawingtypeVo);  
48.             }      
49.         }       
50.           
51.           
52.         /** 
53.          * 复选框变化，改变数据源后，调用此方法，绑定父级 
54.          * */  
55.         override protected function commitProperties():void     
56.         {      
57.             trace("commitProperties");  
58.             super.commitProperties();   
59.             if( data && data[_selectedField] != undefined )      
60.             {      
61.                 bindFather(data as DrawingtypeVo);  
62.                 checkBox.selected = data[_selectedField];  
63.             }      
64.             else     
65.             {      
66.                 trace("checkBox.selected =" + checkBox.selected);  
67.                 checkBox.selected = false;      
68.             }      
69.         }      
70.           
71.         /** 
72.          * 测量尺寸 
73.          * */  
74.         override protected function measure():void     
75.         {      
76.             super.measure();      
77.             measuredWidth += checkBox.getExplicitOrMeasuredWidth();      
78.         }      
79.           
80.           
81.         /** 
82.          * 更新显示列表 
83.          * */  
84.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void     
85.         {      
86.             trace("updateDisplayList");  
87.             super.updateDisplayList(unscaledWidth, unscaledHeight);      
88.             var startx:Number = data ? TreeListData( listData ).indent : 0;      
89.               
90.             //关闭/打开图标显示位置  
91.             if (disclosureIcon)      
92.             {      
93.                 disclosureIcon.x = startx;      
94.                   
95.                 startx = disclosureIcon.x + disclosureIcon.width;      
96.                   
97.                 disclosureIcon.setActualSize(disclosureIcon.width,      
98.                     disclosureIcon.height);      
99.                   
100.                 disclosureIcon.visible = data ?      
101.                     TreeListData( listData ).hasChildren :      
102.                     false;      
103.             }      
104.               
105.             //文件夹图标显示位置  
106.             if (icon)      
107.             {      
108.                 icon.x = startx;      
109.                 startx = icon.x + icon.measuredWidth;      
110.                 icon.setActualSize(icon.measuredWidth, icon.measuredHeight);      
111.             }      
112.               
113.             //移动复选框到文件夹图标后  
114.             checkBox.move(startx, ( unscaledHeight - checkBox.height ) / 2 );      
115.               
116.             //将显示文本设置到复选框后  
117.             label.x = startx + checkBox.getExplicitOrMeasuredWidth();    
118.   
119.               
120.         }  
121.           
122.         /** 
123.          * 绑定父级：如果子级有选中的，父级选中;如果没有选中的父级不选中 
124.          * */  
125.         private function bindFather(drawingtype:DrawingtypeVo):void{  
126.             trace("bindFather:" + drawingtype.FName);  
127.             var childType:ArrayCollection = drawingtype.children;  
128.             var ischeck:Boolean = false;  
129.             if(childType != null && childType.length > 0){  
130.                 for (var i:int = 0; i < childType.length; i++)   
131.                 {  
132.                     var currtype:DrawingtypeVo = childType[i] as DrawingtypeVo;  
133.                     if(currtype.selected){  
134.                         ischeck = true;  
135.                         break;  
136.                     }  
137.                 }  
138.                 drawingtype.selected = ischeck;  
139.             }  
140.             trace("bindFather:" + drawingtype.FName + ":" + ischeck);  
141.         }  
142.           
143.         /** 
144.          * 绑定子级: 如果父级选中，子级全选;  如果父级未选中，子级全不选 
145.          * */  
146.         private function bindChilren(drawingtype:DrawingtypeVo):void{  
147.             trace(drawingtype.FName);  
148.             drawingtype.selected = (data as DrawingtypeVo).selected;  
149.             var childType:ArrayCollection = drawingtype.children;  
150.             if(childType != null && childType.length > 0){  
151.                 for (var i:int = 0; i < childType.length; i++)   
152.                 {  
153.                     var currtype:DrawingtypeVo = childType[i] as DrawingtypeVo;  
154.                     bindChilren(currtype);  
155.                 }  
156.             }  
157.               
158.         }  
159.     }      
160. }  

实体类：

 

[java]  view plain copy

1. package com.csms.model.vo  
2. {  
3.     import mx.collections.ArrayCollection;  
4.   
5.     [Bindable]  
6.     [RemoteClass(alias="com.csms.model.vo.DrawingtypeVo")]  
7.     /** 
8.      * 
9.      * @author fengmoyan 
10.      * 
11.      */  
12.     public class DrawingtypeVo  
13.     {  
14.   
15.         private var _FId:String;  
16.         private var _drawingtype:DrawingtypeVo;  
17.         private var _FName:String;  
18.         private var _FIndex:String;  
19.         private var _FMark:String;  
20.         private var _drawings:Array;  
21.         private var _partprojectDrawingtypes:Array;  
22.         private var _drawingtypes:Array;  
23.           
24.         private var _FParentId:String;  
25.         private var _selected:Boolean;  
26.         private var _children:ArrayCollection;  
27.   
28.   
29.         public function DrawingtypeVo()  
30.         {  
31.         }  
32.   
33.         public function get selected():Boolean  
34.         {  
35.             return _selected;  
36.         }  
37.   
38.         public function set selected(value:Boolean):void  
39.         {  
40.             _selected = value;  
41.         }  
42.   
43.         public function get children():ArrayCollection  
44.         {  
45.             return _children;  
46.         }  
47.   
48.         public function set children(value:ArrayCollection):void  
49.         {  
50.             _children = value;  
51.         }  
52.   
53.         public function get FParentId():String  
54.         {  
55.             return _FParentId;  
56.         }  
57.   
58.         public function set FParentId(value:String):void  
59.         {  
60.             _FParentId = value;  
61.         }  
62.   
63.         public function get FId():String  
64.         {  
65.             return _FId;  
66.         }  
67.   
68.         public function set FId(value:String):void  
69.         {  
70.             _FId = value;  
71.         }  
72.   
73.         public function get drawingtype():DrawingtypeVo  
74.         {  
75.             return _drawingtype;  
76.         }  
77.   
78.         public function set drawingtype(value:DrawingtypeVo):void  
79.         {  
80.             _drawingtype = value;  
81.         }  
82.   
83.         public function get FName():String  
84.         {  
85.             return _FName;  
86.         }  
87.   
88.         public function set FName(value:String):void  
89.         {  
90.             _FName = value;  
91.         }  
92.   
93.         public function get FIndex():String  
94.         {  
95.             return _FIndex;  
96.         }  
97.   
98.         public function set FIndex(value:String):void  
99.         {  
100.             _FIndex = value;  
101.         }  
102.   
103.         public function get FMark():String  
104.         {  
105.             return _FMark;  
106.         }  
107.   
108.         public function set FMark(value:String):void  
109.         {  
110.             _FMark = value;  
111.         }  
112.   
113.         public function get drawings():Array  
114.         {  
115.             return _drawings;  
116.         }  
117.   
118.         public function set drawings(value:Array):void  
119.         {  
120.             _drawings = value;  
121.         }  
122.   
123.         public function get partprojectDrawingtypes():Array  
124.         {  
125.             return _partprojectDrawingtypes;  
126.         }  
127.   
128.         public function set partprojectDrawingtypes(value:Array):void  
129.         {  
130.             _partprojectDrawingtypes = value;  
131.         }  
132.   
133.         public function get drawingtypes():Array  
134.         {  
135.             return _drawingtypes;  
136.         }  
137.   
138.         public function set drawingtypes(value:Array):void  
139.         {  
140.             _drawingtypes = value;  
141.         }  
142.   
143.   
144.     }  
145. }  

使用时在页面上引用即可

[java]  view plain copy

1. <mx:Tree height="100%" id="tree" allowMultipleSelection="true" itemRenderer="com.csms.view.renderers.design.TreeCheckBoxRenderer" width="60%" dataProvider="{_targetData}" labelField="FName" ></mx:Tree>  

 

 

功能简介：

         1. 添加了复选框

         2. 父级和子级级联

               a>   点击父级时，全选/全不选子级

               b>   点击子级时，同一级如果有选中的则选中父级，反之不选中父级
备注：

        1. 重写tree的项显示器

         2.添加checkbox

         3.给checkbox添加事件

         4.当checkbox状态改变时改变数据源选中状态，并绑定子级选中状态

         5.改变后复写父类的commitproperties方法(此方法会在属性改变时调用)，绑定父级的选中状态

         6.父写父级updatedisplay方法(此方法在组件渲染时调用)，设置树形菜单视图

 

因项目需要，所以树形菜单是从数据库中读取的，如果有需要该功能的，可以自定义一个静态的arraycolloction测试即可。

 

另附一张效果图：