`
tw5566
  • 浏览: 460678 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

tree 实现搜索效果

阅读更多
<?xml version="1.0" encoding="utf-8"?>
<!-- Searchable Tree control example. uses e4x expression to find a node with matching id attribute-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
<mx:Script><![CDATA[

  [Bindable]
  public var _xmlData:XML;
  
  public function initApp():void
  {
    _xmlData = <element eid="hello" name="a">
         <element eid="world" name="a1">
            <element eid="123" name="a1.1"/>
            <element eid="graham" name="a1.2"/>
            <element eid="weldon" name="a1.3">
               <element eid="office" name="a1.4">
                  <element eid="thing" name="a1.5"/>
                  <element eid="boat" name="a1.6"/>
                  <element eid="chair" name="a1.7"/>
                  <element eid="123" name="a1.8"/>
               </element>
               <element eid="person" name="a2.0"/>
                </element>
             </element>
             <element eid="123" name="a3.0"/>
          </element> ;
   trace("test")
  }//initapp
  
  //starts at the given node, walks up the tree opening nodes as it goes
  private function expandParents(xmlNode:XML):void
  {
    while (xmlNode.parent() != null) {  
      xmlNode = xmlNode.parent();
      myTree.expandItem(xmlNode,true, false);
    }
  }//expandParents

  //uses e4x to find a node, then calls expand parents to make it visible,
  //then selects it      
private function findNodeById(sId:String):void
{
  var xmllistDescendants:XMLList  = _xmlData.descendants().(@eid == sId);
  //expandParents(xmllistDescendants[0]);
  //myTree.selectedItem = xmllistDescendants[0];
  myTree.dataProvider = xmllistDescendants;
  }//findNodeById           
]]></mx:Script>

    <mx:Panel title="Tree Control Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
        <mx:HBox>
          <mx:TextInput id="tiId" text="boat" />
          <mx:Button label="Find" click="findNodeById(tiId.text)" />         
        </mx:HBox>
        <mx:Tree id="myTree" width="50%" height="100%" labelField="@name"
            showRoot="false" dataProvider="{_xmlData}" />      
    </mx:Panel>
</mx:Application>

 

分享到:
评论

相关推荐

    js tree等效果

    在Web开发中,"js tree"通常指的是利用JavaScript实现的一种树状数据结构的可视化展示效果。这种效果能够帮助用户更好地组织和浏览层次化的数据,例如文件系统、目录结构或者组织架构等。 树形结构是数据结构中的一...

    KdTreeInPCL-master_kdtree_点云搜索邻近点代码_kdtree算法实现邻近点的搜索_

    PCL的KdTree实现提供了一种高效的方法来搜索点云中的邻近点,这对于点云配准、表面重建、特征提取等任务至关重要。使用KdTree进行点云搜索邻近点的基本步骤如下: 1. **构建KdTree**:首先,我们需要一个点云数据集...

    javascript实现的Tree

    JavaScript实现的Tree是一种在网页上展示层次结构数据的常见方式,尤其在构建具有导航功能的Web应用程序时。这种Tree结构通常用于文件系统、组织架构、菜单等场景,它允许用户以交互的方式探索和操作这些层次结构。...

    DivTree实现带复选框的tree(内附效果图)

    - “内附效果图”可能包含了一种特定的实现方式,展示了如何通过CSS和JavaScript实现美观且功能齐全的复选框树。 - 安放路径图则可能指导如何在实际项目中引入和配置这些资源。 6. **优化与性能**: - 对于大型...

    基于element-ui封装可搜索的懒加载tree组件的实现

    基于Element-UI封装可搜索的懒加载Tree组件的实现 在前端开发中,尤其是在管理后台系统里,Tree组件广泛用于展示层级化数据。随着互联网数据量的日益增长,传统的Tree组件已无法满足大数据量场景下的性能要求。于是...

    手机端js tree

    在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。...在实际开发过程中,理解并运用这些知识点将有助于构建高性能、易维护的移动端js Tree实现。

    可自定义树节点的Tree组件

    - **搜索和过滤**:内置搜索框,让用户能快速找到特定节点,或者根据条件过滤显示部分节点。 4. **源码分析**: - **数据模型**:理解组件的数据结构,如节点对象包含哪些属性和方法,如何表示父子关系。 - **...

    Ajax tree,动态生成Tree

    5. **更新界面**:将新节点添加到DOM树中,显示在界面上,同时可以实现动画效果以增强用户体验。 ### 三、实现Ajax Tree的工具和库 - **jQuery UI**:提供可自定义的TreeView组件,支持Ajax加载。 - **jstree**:...

    kdtree建立与查询

    在提供的压缩包文件中,`license.txt`可能包含了关于kdTree实现的许可证信息,而`kdtree`可能是MATLAB的kd树实现源代码或二进制文件。通过阅读源代码,我们可以更深入地理解kd树的内部工作原理,包括节点的划分策略...

    splay tree C# code 伸展树的C#代码实现

    伸展树(Splay Tree)是一种自调整的二叉搜索树数据结构,它通过操作将最近访问的元素移动到树的根部,从而优化查找、插入和删除等操作的平均性能。C#语言中的伸展树实现涉及了对二叉树节点的操作、旋转算法以及对树...

    bootstrap框架下带搜索功能的下拉树插件

    5. **合并功能**:当用户在`bootstrap-select`中输入搜索关键字时,可以通过监听`keyup`事件并更新`bootstrap-treeview`中的可见节点来实现搜索功能。同时,当用户在`bootstrap-treeview`中点击节点时,同步更新`...

    KDTree测试亲测可用

    本文将详细探讨KDTree的工作原理,以及如何将其应用于ICP(Iterative Closest Point)算法中,以实现有效的数据匹配和优化迭代。 ### KDTree简介 KDTree是一种二叉空间分割树,其基本思想是将高维空间的数据点通过...

    kd树 kdtree KdTree

    kd_pr_search.cpp和kd_search.cpp可能分别实现了kd树的优先搜索和普通搜索算法,而kd_fix_rad_search.cpp可能涉及固定半径范围内的搜索功能。 ANN.cpp可能是一个库,提供近似最近邻(Approximate Nearest Neighbor,...

    Layui的eleTree树式选择器,分单选和多选,带搜索功能

    搜索功能的实现依赖于`filter`方法,可以自定义过滤规则,提高搜索的灵活性。 ### 四、使用步骤 1. **引入依赖**:首先,你需要在项目中引入eleTree的CSS和JS文件,以及Layui的核心库。 2. **HTML结构**:创建一个...

    js写的tree

    1. `dtree.js`:核心的Tree实现文件,包含了节点管理、渲染、事件处理等功能。 2. `dtree.css`:样式文件,定义了Tree的视觉样式,如节点的形状、颜色、选中态等。 3. `index.html`:演示页面,展示了如何在HTML中...

    VC++ TREE控件使用实例大全

    4. **自定义绘制**:为了实现更复杂的显示效果,如自定义图标、背景色等,可以使用CTreeCtrl的BeginItemEdit、EndItemEdit、SetItemState等方法进行自定义绘制。`GHCustomDraw_src`这个示例可能就展示了如何进行...

    jstree用法大集合

    这个压缩包可能包含了多种树形菜单的展示样式和效果,例如异步加载、拖放操作、搜索功能、多选模式等。这些例子有助于开发者根据项目需求选择合适的展示方式。 4. **TreeView.rar** `TreeView`是ASP.NET中的一个...

    js-tree:js搜索树状折叠插件

    js-treejs树状折叠插件,主要实现树状结构的展示效果,附加搜索功能.如下图demo效果,样式可以自定义。npminstall --save js-tree-search如何使用let jsTree = new JsTree($('#container'));let data = [ { "id": 9, ...

    jquery.tree 树

    jstree是一个轻量级的JavaScript库,提供了一整套完善的API和多种可定制的配置选项,用于创建具有拖放、搜索、多选、上下文菜单等丰富功能的树结构。它的优点在于易于集成,与各种前端框架兼容,并且提供了良好的...

Global site tag (gtag.js) - Google Analytics