`

flex的tree之间拖动

    博客分类:
  • Flex
阅读更多
//tree的XML内容
var company:XML =
<list>
    <department title="Finance" code="200">
        <employee name="John H" />
        <employee name="Sam K" />
    </department>
    <department title="Engineering" code="300">
       <employee name="Erin M" />
       <employee name="Ann B" />
    </department>
    <department title="Operations" code="400" isBranch="true" />
</list>

//treeLabel,在tree控件的属性中指定,可以根据解析XML的内容显示所需节点
private function treeLabel( item:Object ) : String
{
     var node:XML = XML(item);
     if( node.localName() == "department" )
         return node.@title;
     else 
         return node.@name;
}
//绑定tree的dataProvider
[Bindable]
var companyList:XMLListCollection = new XMLListCollection( company.department );

//tree控件
<mx:Tree x="83" y="25" width="225" id="tree" height="307" labelFunction="treeLabel"
dataProvider="{companyList}" dragEnabled="true" dropEnabled="false"
dragEnter="onDragEnter(event)" dragDrop="onDragDrop(event)"></mx:Tree>

//事件onDragEnter
private function onDragEnter(event: DragEvent): void{
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}


//事件onDragDrop
//注意:("treeItems") 为tree控件默认的可以获取items的值
private function onDragDrop(event: DragEvent): void{
var ds: DragSource = event.dragSource;
var dropTarget: Tree = Tree(event.currentTarget);
var items: Array = ds.dataForFormat("treeItems") as Array;
var r: int = dropTarget.calculateDropIndex(event);
tree.selectedIndex = r;
var node: XML = tree.selectedItem as XML;
trace(node.@title);
for(var i:Number=0;i<items.length;i++){
var item:XML = items[i] as XML;
trace(items[i]);
trace("title:"+item.@name);
}

}
0
3
分享到:
评论

相关推荐

    flex Tree 复选框。

    让我们深入探讨这个主题,了解如何实现Flex Tree复选框以及其与父目录状态之间的交互。 首先,我们要知道如何在Flex Tree组件中添加复选框。在Flex中,我们可以自定义TreeItemRenderer来实现这个功能。...

    flex tree 拖拽

    综上所述,实现 Flex Tree 的拖拽功能需要理解 Flex 的 DragManager 机制,掌握 Tree 控件的拖放属性和事件,以及如何处理数据模型的变化。通过精心设计和优化,可以创建出交互性强、易用性好的树形数据操作界面。在...

    flex tree+checkbox级联勾选

    在IT行业中,Flex Tree是一种常用于数据展示和交互的组件,尤其在构建用户界面时,它能够以树形结构清晰地展示层次数据。配合Checkbox(复选框)功能,可以提供用户选择或过滤数据的便利操作。"Flex Tree + Checkbox...

    flex中 Tree树节点内部拖动实例(此实例限制了什么节点可以拖动及拖动到什么位置)

    在本文中,我们将详细探讨如何在Flex的Tree组件中实现节点的拖放操作,并且限制可拖动的节点以及拖动的目标位置。 首先,我们需要了解Flex Tree组件的基本用法。Tree组件用于显示层次结构的数据,每个节点代表数据...

    flex带复选框的tree,flex checkboxtree

    在Flex中,Tree组件是用于显示层次结构数据的控件,而"flex带复选框的tree"(Flex CheckboxTree)则是对Tree组件的一种扩展,增加了复选框功能,用户可以对树形结构的节点进行选择或全选操作,常用于权限管理、配置...

    flex中tree和checkbox结合使用的插件

    在Flex开发中,Tree组件和Checkbox控件的结合使用是一个常见的需求,特别是在构建具有层级结构并需要用户进行多选操作的界面时。本插件专为此目的设计,它允许用户在树形结构中通过复选框来选择或取消选择节点,从而...

    Flex 4.5 实现tree拖拽到任意组建

    本教程将详细介绍如何在Flex 4.5中实现Tree组件与任意组件之间的拖放操作,特别是将树形结构的数据拖拽到DataGrid中,并获取目标位置的全部数据进行添加。 1. **Flex 4.5的DragManager和DropTarget** Flex 4.5中的...

    flex 拖拽功能 中文文档

    ### Flex拖拽功能详解 Flex框架提供了一套强大的机制用于实现拖放(drag and drop)功能,这在用户界面设计中极为常见,特别是在构建高度交互性的应用时。本文旨在深入探讨Flex中的拖拽功能,包括其工作原理、关键...

    flex拖动树形

    在本案例中,我们关注的是一个特定的实现——"flex拖动树形",这是一种允许用户通过拖放操作在两个区域之间移动节点的自定义树形控件。 拖放功能是人机交互中常见的一种交互模式,用于在界面上移动元素,常用于文件...

    flex 拖拽树 控件

    - `flextree` 文件可能是一个包含预编译的Flex树控件组件库,或者是一个示例项目的源代码,可以供学习和参考。 总之,Flex拖拽树控件提供了丰富的交互体验,允许用户直观地管理和组织树形数据。通过理解并应用上述...

    拖拽Tree中结点的例子

    在本文中,我们将深入探讨如何实现“拖拽Tree中结点的例子”,这主要涉及使用Adobe Flex的树组件(Tree)来实现节点的拖放(Drag and Drop)功能。Flex是一种基于ActionScript 3.0的开源框架,用于构建富互联网应用...

    Flex拖拽

    这种功能在视觉应用中尤其有用,比如在两个列表之间拖动数据项、重新定位容器中的控件或是将Flex组件从一个容器移动到另一个容器。 #### 二、Flex拖拽的工作原理 ##### 1. **初始化阶段**: - 用户通过鼠标选择...

    Flex List DataGrid Menu 拖动技术

    ### Flex中的List、DataGrid与Menu拖动技术详解 在Flex框架中,用户交互和数据展示是极其重要的组成部分。为了增强用户体验,Flex提供了多种控件,包括`List`、`DataGrid`和`Menu`等,这些控件支持丰富的用户交互...

    flex的tree动态加载大量数据与滚动条相关问题探讨

    在进行前端开发时,特别是在使用Adobe Flex技术构建富互联网应用(RIA)中,处理大量数据的动态加载以及在Tree组件中实现滚动条功能是一个常见的问题。这一问题不仅影响到用户体验,而且对性能和开发效率也有极大...

    flex 画图的代码

    下面我们将深入探讨如何在Flex3中利用XML生成树形结构、实现拖放功能以及在节点之间绘制线条。 1. **XML文件生成树形结构** 在Flex中,XML常用于数据绑定,可以轻松地将数据结构转换为可视化的组件层次结构。对于...

    flex 动态生成树

    在Flex中,动态生成树指的是能够根据运行时的数据来构建或更新`Tree`组件的过程。这种方式可以有效地提高应用的灵活性和可维护性。 #### 三、关键代码解析 ##### 1. 初始化变量 ```as private var subNodes:...

    第十五节Tree树形菜单组件运用.docx

    - **添加 Tree 组件**:在 Flex 的组件库中找到 Tree,将其拖拽至设计界面。此时,由于尚未绑定数据,组件会显示为空白。 - **源代码视图**:在源代码窗口中,你会看到 `&lt;mx:Tree&gt;` 标签,虽然它基于 mx 框架,但...

    Flex开发实例.pdf

    - 实现Flex应用与后端WebService之间的数据交互,提高应用的扩展性和灵活性。 #### 4. **Flex与Ajax交互** - 通过Ajax技术实现Flex应用与服务器的异步数据交换,提升用户体验。 综上所述,Flex不仅是一种功能...

    flex做的购物商店中文版(**推荐**)

    4. **Flex拖拽功能**:在购物商店中,可能实现了一个创新的拖拽功能,允许用户通过拖放操作来选择商品。这利用了Flex的DragManager和DropTarget API,可以增强用户的交互体验。 5. **中文版**:这个版本的购物商店...

Global site tag (gtag.js) - Google Analytics