Flex中带有三种状态CheckBox的Tree的实现

常常会用到带有3种状态CheckBox的树形组件，比如在权限管理中，或者是地区选择中等等，如下图：



不多说费话了，直接进入主题，看看如何实现。其实在Flex中，只用自己实现一个TreeItemRenderer就可以了，代码如下：




package com.robin

{


import flash.events.Event;


import flash.geom.Rectangle;




import mx.controls.CheckBox;


import mx.controls.treeClasses.TreeItemRenderer;


import mx.controls.treeClasses.TreeListData;


import mx.events.FlexEvent;






public class ThreeStatusCheckBoxTreeItemRenderer extends TreeItemRenderer

{


private static var _colorForThirdState:int = 0x37BEF8;


private static var _selectedField:String = "selected";




private var checkBox:CheckBox;






public function ThreeStatusCheckBoxTreeItemRenderer()

{


super();


}






override protected function createChildren():void

{


super.createChildren();


checkBox = new CheckBox();


addChild(checkBox);


checkBox.addEventListener(Event.CHANGE, changeHandler);


}






/**//**


* Initial data when component initialization


*


*/




override protected function commitProperties():void

{


super.commitProperties();




if (data && data.@[_selectedField] != null)

{


var s:int = int(data.@[_selectedField]);


var selected:Boolean = s > 0 ? true : false;


checkBox.selected = selected;




} else

{


checkBox.selected = false;


}


}






/**//**


* update dataProvider when user click CheckBox


*


*/




protected function changeHandler(event:Event):void

{




if (data && data.@[_selectedField] != null)

{


data.@[_selectedField] = checkBox.selected ? "1" : "0";


}




var listData:TreeListData = TreeListData(listData);




if (listData.hasChildren)

{


var item:XML = XML(listData.item);


handleAllChildren(item.children());


}


handleAllParents(listData.item.parent());


}






private function handleAllChildren(children:XMLList):void

{




for each (var item:XML in children)

{


item.@[_selectedField] = checkBox.selected ? "1" : "0";


var children:XMLList = item.children();




if (children.length() > 0)

{


handleAllChildren(children);


}


}


}






private function handleAllParents(parent:XML):void

{




if (parent != null)

{


var children:XMLList = parent.children();


var hasSelected1:Boolean = false;


var hasSelected2:Boolean = false;


var hasSelected0:Boolean = false;




for each (var item:XML in children)

{




if (int(item.@[_selectedField]) == 1)

{


hasSelected1 = true;


}




if (int(item.@[_selectedField]) == 2)

{


hasSelected2 = true;


}




if (int(item.@[_selectedField]) == 0)

{


hasSelected0 = true;


}


}




if (checkBox.selected == true)

{




if (!hasSelected0 && !hasSelected2)

{


parent.@[_selectedField] = "1";




} else

{


parent.@[_selectedField] = "2";


}




} else

{




if (!hasSelected1 && !hasSelected2)

{


parent.@[_selectedField] = "0";




} else

{


parent.@[_selectedField] = "2";


}


}


handleAllParents(parent.parent());


}


}






/**//**


* reset itemRenderer's width


*/




override protected function measure():void

{


super.measure();


measuredWidth += checkBox.getExplicitOrMeasuredWidth();


}






/**//**


* re-assign layout for tree, move lable to right


* @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();




var node:XML = data as XML;




if (int(node.@[_selectedField]) == 2)

{


fillCheckBox(true);




} else

{


fillCheckBox(false);


}




}






/**//**


* re-draw check box for the third state


* @param isFill


*/




private function fillCheckBox(isFill:Boolean):void

{


checkBox.validateNow();


checkBox.graphics.clear();




if (isFill)

{


var myRect:Rectangle = checkBox.getBounds(checkBox);


checkBox.graphics.beginFill(_colorForThirdState, 1);


checkBox.graphics.drawRoundRect(myRect.x, myRect.y, myRect.width, myRect.height, 1, 0x00FF00);


checkBox.graphics.endFill();


}


}






}


}

然后在tree组件中使用这个renderer就可以了。


<?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" xmlns:robin="com.robin.*">


<fx:Declarations>


<fx:XMLList id="treeData">


<node name = "ShangHai" type="ROOT" selected ="1">


<node name = "HuangPu" type="NODE" selected = "1">


<node name = "A" type="NODE" selected = "1" />


<node name = "B" type="NODE" selected = "1" />


</node>


<node name = "PuDong" type="NODE" selected = "1"/>


</node>


<node name = "Beijing" type="ROOT" selected = "2">


<node name = "HaiDian" type="NODE" selected = "0"/>


<node name = "ChaoYang" type="NODE" selected = "1"/>


</node>


</fx:XMLList>


</fx:Declarations>


<fx:Script>


<![CDATA[




protected function getCurrentData_clickHandler(event:MouseEvent):void

{


currentText.text = String(treeData);


}


]]>


</fx:Script>




<mx:Tree x = "0" y = "0" width = "232" height = "285" itemRenderer = "com.robin.ThreeStatusCheckBoxTreeItemRenderer" labelField = "@name" dataProvider = "{treeData}"/>


<s:Button x = "43" y = "293" label = "Get Current Data" id = "getCurrentData" click = "getCurrentData_clickHandler(event)"/>


<s:TextArea x = "253" y = "0" width = "459" height = "285" id = "currentText"/>


</s:Application>



就是这么简单！