很好用的flex树形选择器
树形菜单选择,带checkbox复选框的选择器
选择/取消 子菜单可更改父菜单的状态
这里的checkbox有三种状态
选中(打钩)、未选(空白)、子菜单有选中的但未全部选中(灰色填充)
效果如图
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:controls="it.sephiroth.controls.*">
<mx:Style>
Application {
font-size: 12px;
}
</mx:Style>
<mx:Script>
<![CDATA[
import it.sephiroth.renderers.TreecheckboxItemRenderer;
import mx.events.TreeEvent;
[Bindable]private var xml:XML =
<node name="菜单" isSelect="0">
<node name="菜单1" isSelect="0">
<node name="菜单11" isSelect="0"></node>
<node name="菜单12" isSelect="0">
<node name="菜单121" isSelect="0"></node>
<node name="菜单122" isSelect="0"></node>
<node name="菜单123" isSelect="0"></node>
</node>
<node name="菜单13" isSelect="0"></node>
</node>
<node name="菜单2" isSelect="0"></node>
<node name="菜单3" isSelect="0"></node>
<node name="菜单4" isSelect="0"></node>
</node>;
/**
* Called on checkbox click
* check and update for both parents and child nodes
* according to the checkbox status
*/
private function onItemCheck( event: TreeEvent ): void
{
updateParents( event.item as XML, ( event.itemRenderer as TreecheckboxItemRenderer ).checkBox.checkState );
updateChilds( event.item as XML, ( event.itemRenderer as TreecheckboxItemRenderer ).checkBox.checkState );
}
/**
* @see it.sephiroth.controls.CheckBoxExtended#checkState
*
*/
private function updateChilds( item:XML, value: uint ):void
{
var middle: Boolean = ( value & 2 << 1 ) == ( 2 << 1 );
var selected: Boolean = ( value & 1 << 1 ) == ( 1 << 1 );
if( item.children( ).length( ) > 0 && !middle )
{
for each(var x: XML in item.node )
{
x.@isSelect = value == ( 1 << 1 | 2 << 1 ) ? "2" : value == ( 1 << 1 ) ? "1" : "0";
updateChilds( x, value );
}
}
}
private function updateParents( item: XML, value: uint ): void
{
var checkValue: String = ( value == ( 1 << 1 | 2 << 1 ) ? "2" : value == ( 1 << 1 ) ? "1" : "0" );
var parentNode: XML = item.parent( );
if( parentNode )
{
for each(var x: XML in parentNode.node )
{
if( x.@isSelect != checkValue )
{
checkValue = "2"
}
}
parentNode.@isSelect = checkValue;
updateParents( parentNode, value );
}
}
]]>
</mx:Script>
<controls:TreeCheckBox id="myTree" width="98%" height="98%" labelField="@name" checkField="@isSelect"
itemCheck="{onItemCheck( event )}" dataProvider="{xml}" openItems="{xml.node}"/>
</mx:Application>