Flex3 Tree组件的过滤查找 (Tree的展开和定位)

在使用Tree的时候,数据一旦很多,就很难定位自己要的数据,这里就需要查找和定位了。

默认Tree的Item都是close的,查找后,要判断isBranch?如果是,我们打开它的parent,然后定位此查找项就行了。

这里涉及到的查找和定位,代码比较简单,使用一个递归方法就行了。

myTree:要查找的树;treeData:tree的数据源;findStr:待查找的项。(这里没有模糊查找,需要完全匹配)

/**
 * 定位查找内容并打开。
 * 此方法最好作为自定义Tree控件的API
 * */
 private function recurpositionAndOpenItem(myTree:Tree,treeData:XMLList,findStr:String):void
{
	for(var i:int=0; i<treeData.length(); i++)
	{
		var childXML:XML = treeData[i];
		if(myTree.dataDescriptor.isBranch(childXML))
		{
			recurpositionAndOpenItem(myTree,childXML.children(),findStr);
			continue;
		}
		if([email protected])
		{
			myTree.expandChildrenOf(childXML.parent(),true);
			myTree.selectedItem = childXML;
			myTree.scrollToIndex(myTree.selectedIndex);
			return;
		}
	}
}

这里涉及到了查找,那么简单的TextInput是不是显得功能太单调,而且上面的方法没有模糊匹配,所以需要一个过滤查找输入框组件。

功能截图如下:

功能点:自动过滤内容,动态显示在下拉框内,配对的项使用下划线或者改变Color的方式显示。

这里我参考了老外资料,源码就不加了。

时间: 2024-08-29 21:27:19

Flex3 Tree组件的过滤查找 (Tree的展开和定位)的相关文章

Easyui中tree组件实现搜索定位功能及展开节点定位

这几天遇到个input + tree  实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果     小二 上图  : 需要的部件知识: easyui API 方法: select       target        选择一个节点,'target'参数表示节点的DOM对象. expand    target         展开一个节点,'target'参数表示节点的DOM对象.在节点关闭或没有子节点的时候,节点ID的值(名为'id'的参数)

EasyUI之tree组件与treegrid组件

最近做了一个使用EasyUI的基于角色的权限分配系统,在这个过程中为了有更好的用户体验(也在网上找了挺多关于该系统的界面),先上我做的截图: 虽然,后台的逻辑上并不难,但是这个EasyUI的tree组件和treegrid组件,确实让我废了一大把力气>>好了废话不多说,开始正题: 一:tree组件 每个节点都具备以下属性: id:节点ID,对加载远程数据很重要. text:显示节点文本. state:节点状态,'open' 或 'closed',默认:'open'.如果为'closed'的时候,

Element-ui tree组件自定义节点使用方法

工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ 1 <template> 2 <div class="sortDiv"> 3 <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :e

dojo组件使用---tree组件的局部更新

dojo的tree组件使用主要涉及的几个api: 1.dijit/Tree:树组件 2.dijit/Tree._TreeNode:树节点组件,局部更新时就是修改这个组件.(由于数组件的store使用Memory,所以需要手动同步更新store): 3.dijit/tree/ObjectStoreModel:数组件数据操作模块. 具体操作: 1.拿到dijit/Tree._TreeNode实例对象.树组件的每个节点都是一个dijit/Tree._TreeNode对象,通过selectedNode/

查找算法(5)--Tree table lookup--树表查找

1.树表查找 (1) 最简单的树表查找算法——二叉树查找算法. [1]基本思想:二叉查找树是先对待查找的数据进行生成树,确保树的左分支的值小于右分支的值,然后在就行和每个节点的父节点比较大小,查找最适合的范围. 这个算法的查找效率很高,但是如果使用这种查找方法要首先创建树. [2]二叉查找树(BinarySearch Tree,也叫二叉搜索树,或称二叉排序树Binary Sort Tree)或者是一棵空树,或者是具有下列性质的二叉树: 1)若任意节点的左子树不空,则左子树上所有结点的值均小于它的

微信小程序 tree组件

1. 根目录下新建tree组件 /components/tree/tree.wxml.js.wxss.json (1). tree.wxml <!-- 多级树 --> <view class="tree_container"> <!-- 一级菜单 --> <view style="padding-left: {{treeListIndex*8}}px"> <view bindtap='tapTreeItem' c

关于Element UI tree组件 懒加载的更新操作

近期根据需求,要做一个懒加载的组织树,并且可以编辑组织树.但是编辑了之后无法进行实时更新. 一开始想到了很多解决方案,也在网上参考了很多方案,但是都又种种不足. 所以我去看了elementUI的tree组件的懒加载方法的源代码 Node.prototype.loadData = function loadData(callback) { var _this5 = this; var defaultProps = arguments.length > 1 && arguments[1]

(转)XGBoost 与 Boosted Tree |《XGBoost 与 Boosted Tree | 我爱计算机》

//转自 <XGBoost 与 Boosted Tree | 我爱计算机> 1. 前言应 @龙星镖局  兄邀请写这篇文章.作为一个非常有效的机器学习方法,Boosted Tree是数据挖掘和机器学习中最常用的算法之一.因为它效果好,对于输入要求不敏感,往往是从统计学家到数据科学家必备的工具之一,它同时也是kaggle比赛冠军选手最常用的工具.最后,因为它的效果好,计算复杂度不高,也在工业界中有大量的应用. 2. Boosted Tree的若干同义词说到这里可能有人会问,为什么我没有听过这个名字

Dynamic CRM 2013学习笔记(八)过滤查找控件 (类似省市联动)

我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤查找控件来实现.本文主要介绍基本的查找控件过滤.多表关联的复杂过滤以及子表里实现查找控件的过滤.   一.简单的过滤 先看下需求: 按"Special GL Indicator" 来过滤 Posting 查找控件增加了preSearch事件.它发生在查找控件显示对话框供用户查找记录之前,与