点击Tree中的一行 打开/关闭 节点

 

1点击Tree中的一行 打开/关闭 节点

在Flex缺省的Tree组件中，如果要打开某个节点的话，点击节点本身是不好用的，只能点击节点前面的那个很小的“三角符号”，这种用户体验其实是很糟糕的。不过我们可以通过Tree 中的 itemClick 事件来自己实现这个事情。

假设我们有一个Tree，它的id=”tree”，定义一个它的itemClick事件处理函数 itemClickHandler:

private function itemClickHandler(evt:ListEvent):void
{
var item:Object = Tree(evt.currentTarget).selectedItem;
if (tree.dataDescriptor.isBranch(item)) {
tree.expandItem(item, !groupTree.isItemOpen(item), true);
}
}

代码很简单，就是先获取到当前点击的节点，判定它是否是一个枝节点，然后将它的打开状态更改。

最后在Tree中设置 itemClick=”itemClickHandler(event)” 就OK了。

 

２＼

拖拽时自动展开 Tree 节点

有时候我们想要对Tree进行拖拽操作，把一个节点从父节点拖拽到另一个节点下。但是Tree本身不提供自动展开节点功能。假设Tree的结构是这样的：

-parent1
-item1
-item2
-parent2
-item3
-item4

如果我想要把 item4 拖拽到parent1下面，就要先把 parent1和parent2都展开，比较麻烦，下面是自动展开的解决方案：

private function dragOverHandler(event:DragEvent):void
{
var currNodeOver : TreeItemRenderer= TreeItemRenderer(event.currentTarget.indexToItemRenderer(event.currentTarget.calculateDropIndex(event)));

if (currNodeOver !=null)
{
if(Tree(event.currentTarget).dataDescriptor.isBranch(currNodeOver.data) == true)
{
if (Tree(event.currentTarget).isItemOpen(currNodeOver.data)==false)
Tree(event.currentTarget).expandItem(currNodeOver.data,true,true);
}
}
}

然后把 Tree 的 dragOver 设定为 dragOverHandler ，dragOver=”dragOverHandler(event)” 。然后就OK了。