好东西拿出来分享

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

 

评论

5 楼 king_wgj 2009-01-08  

谢谢楼主！

4 楼 me_kankan 2008-12-23  

好东西，顶！！

3 楼 happyblue 2008-12-09  

这里面主要的操作就是 << 运算符，它一个位移运算， << 表示左移， >> 表示右移

这个是带符号的位移运算
比如 2 << 1 的意思是将左边的 2 转换成32位的二进制（计算机只认识二进制），然后向左移1（右边的数字就是需要移动的位数）位
2 = 00000000000000000000000000000010 向左移1位为 00...00100 = 4
所以 2 << 1 = 4

& 运算符是与运算，两个二进制数进行与运算
比如 1 & 4 转换为如下的运算
00...00001
00...00100
-----------
00...00000  = 0

所以 1 & 4 = 0


这种操作运算速度很快

2 楼 srivatsa 2008-12-09  

老大，能不能讲解一下“        var middle: Boolean = ( value & 2 << 1 ) == ( 2 << 1 );  
        var selected: Boolean = ( value & 1 << 1 ) == ( 1 << 1 );   ”

的具体用法，或哪里有这方面的详细学习资料？？

1 楼 happyblue 2008-12-04  

沙发
自己顶