好东西拿出来分享

很好用的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>

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值