1. 简单配置数据源即可实现多层显示
2. 可设定初始选定的项目或目录
3. 获得选定的项目

关于Flex CheckBox Tree的例子有很多, 如:

3 State CheckBox Tree: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1047969#

CheckBoxTree Component (Adobe Flex 3): http://srirangan.net/?p=56

Flex Checkbox TreeItemRenderer: http://remwebdevelopment.com/dev/a31/Flex-Checkbox-TreeItemRenderer.html

FLEX 构建完美的带有CheckBox三状态的Tree控件: http://blog.csdn.net/cjy37/archive/2009/05/11/4166621.aspx

Flex在Tree控件上添加CheckBox: http://montage.javaeye.com/blog/326302

但上述举例均有一个非常明显的问题: MVC没有分清楚, 是否选定基本上都存储在数据源中, 实际上这只是UI的一个状态, 因此个人认为, 是否选中, 不应该存放于Modeling中. 因此写下面两个类.

具体使用方法, 请参考代码.

转载本文或使用代码请注明出处或保留注释中的版权信息.

代码下载: http://www.box.net/shared/q6r915j4qr

	// Constructor
	public function TreeForCodeMaintain(codeMaintainService_:ICodeMaintainService) {
		super();
		_codeMaintainService = codeMaintainService_;
		dataProvider =  dataProvider = ["code1", "code2", "code3", ["folder1", ["subCode1", "subCode2", ["subFolder1", ["sc1", "sc2"]]]]];
		dataDescriptor = new TreeDDForCodeMaintain();
		labelFunction = labelFunForTree;
		dataTipFunction = dataTipFunctionForTreeCode;
		showDataTips = true;
	}

	protected function dataTipFunctionForTreeCode(item:Object):String {
		if(item is Array) {
			return String(item[0]);
		}
		// return item.toString();
		return AppContext.getInstance().metaDomain.getEntityByName(String(item)).descriptionLocalized;
	}

效果:

expandChildrenOf(item:Object, open:Boolean):void
Opens or closes all the tree items below the specified item.

expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void
Opens or closes a branch item.

可以通过设定Tree的样式来更改Tree的icon. 如下

		_treeLAAndSub = new Tree();
		_treeLAAndSub.iconField = "hahah@#$@#$";
		_treeLAAndSub.setStyle("folderClosedIcon", ImagesForActions.iconImport);	//文件夹关闭时
		_treeLAAndSub.setStyle("folderOpenIcon", ImagesForActions.iconExport);	//文件夹打开

		_treeLAAndSub.setStyle("defaultLeafIcon", ImagesForActions.iconCopy);	// 叶子
		_treeLAAndSub.setStyle("disclosureOpenIcon", ImagesForActions.iconRemove);	//文件夹打开时旁边的图示
		_treeLAAndSub.setStyle("disclosureClosedIcon", ImagesForActions.iconAdd);	//文件夹关闭时旁边的图示

解决: 通过监听右键菜单SELECT事件, 获取到当前右键所击位置的Index, 并将之赋值给DataGrid或其他容器的SelectIndex, 完成点击操作

详细实现:  以DataGrid为例.

第一步, 首先给DataGrid添加菜单

			var dgMenu:NativeMenu = new NativeMenu();
			var del:NativeMenuItem  = new NativeMenuItem("Test");
			del.addEventListener(Event.SELECT, onRightClickDel);
			dgMenu.addItem(del);
			dgMenu.addEventListener(ContextMenuEvent.MENU_SELECT, onRightClicked);
			_dataGridStudent.contextMenu = dgMenu;

第二步, 响应函数:

	/**响应右键点击 */
	private function onRightClicked(e:ContextMenuEvent):void {
		var rightClickItemRender:IListItemRenderer;

		if(e.mouseTarget is IListItemRenderer) {
			rightClickItemRender = IListItemRenderer(e.mouseTarget);
		}else if(e.mouseTarget.parent is IListItemRenderer) {
			rightClickItemRender = IListItemRenderer(e.mouseTarget.parent);
		}

		if(rightClickItemRender != null) {
			var rightClickIndex:int = _dataGridStudent.itemRendererToIndex(rightClickItemRender);
			if(_dataGridStudent.selectedIndex != rightClickIndex) {
				_dataGridStudent.selectedIndex = rightClickIndex;
				onSlectedChange();
			}
		}
		trace("通过右键单击获得选定的行: " + _dataGridStudent.selectedIndex);
	}

Delete响应函数:

	/** 当右键菜单的Delete点击后响应*/
	private function onRightClickDel(e:Event):void {
		//在这里放逻辑....
	}

效果:

控制台Trace信息:

通过右键单击获得选定的行: 1

参考资料: Adobe CookBook  Select List item with mouse right-click

作者:http://liguoliang.com 欢迎访问:Adobe上海用户组: http://riashanghai.com ]

1. 设计目标:

Flex中Tree动态加载,即在点击之后才加载下级目录的内容.

2. 概要设计:

Tree的属性:
dataDescriptor=”{new CategoryTreeDataDiscriptor()}”
dataProvider=”{Category.root}” id=”treeCategory”
通过root对象与dataDescriptor提供给Tree数据.

初始化成功后即在Tree上监听函数:
treeCategory.addEventListener(TreeEvent.ITEM_OPEN, treeOpenHandler);
在TreeEvent.ITEM_OPEN发生之后,读取数据库或其他数据源的数据,以建立其下级目录.

3. 实现代码:

在用户登录成功之后会立即读取数据并新建其对应的根目录,并将其赋值给静态变量Category.root.
为了提示用户目录正在加载,同时也作为已经加载过的标记,为每个新建的Category中加入一个fake Category;
实现方法: category的代码,在每次新建category的时候都会增加fake,当建立fake时不会增加.

	public class Category
	{
		public static var fake:Category = new Category(true);
		fake.label = "Loading..";

		[Bindable]
		public static var root : Category;

		public var id:int;
		public var label : String;
		public var subCats : ArrayCollection;
		public var notes : ArrayCollection;
		public var parent : Category;

		public function Category(isFake:Boolean=false) {
			if(!isFake) {
				addSubCat(fake);
			}
		}....

treeOpenHandler:

如果为第一次展开[即其子目录只有一个,并且为fake],则读取数据源数据,建立其下级目录对象,将下级目录对象加入到该目录的子目录ArrayCollection中.

//Tree响应函数,展开后读取子目录
private function treeOpenHandler(e:TreeEvent):void {
openingItem = e.item as Category;
LogUtils.defaultLog.info(openingItem.label + " is opened");
if(openingItem == Category.fake) {
Alert.show("正在加载,请稍候...");
return;
}
if((openingItem as Category).subCats == null) {
return;
}
if((openingItem as Category).subCats.length !=1 || (openingItem as Category).subCats[0] != Category.fake) {
return;
}
var sql:String =
"SELECT * FROM Cat WHERE user_ID=" + currentUser.id + " AND " + "parent_ID=" + openingItem.id + ";";
SQLUtils.createAndExecuteStatement(conn,sql,null,loadSubCatsOk,loadSubCatsError);
}

//当load正常时,运行,增加子目录,首先会删除fake.
private function loadSubCatsOk(e:SQLEvent):void {
var CatsFromDB:SQLResult = e.target.getResult();
if(CatsFromDB.data == null) {
openingItem.subCats.removeAll();
LogUtils.defaultLog.info(openingItem.label + “没有子目录”);
return;
}
openingItem.subCats.removeAll();
for(var i:int=0; i
var subCat:Category = new Category();
subCat.id = CatsFromDB.data[i].cat_ID;
subCat.label = CatsFromDB.data[i].label;
subCat.parent = openingItem;
LogUtils.defaultLog.info(“子目录名称:” + CatsFromDB.data[i].label);
openingItem.addSubCat(subCat);
}
}