`
pingfan
  • 浏览: 38633 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext tree 树的过滤

阅读更多
根据关键字查询树中任意匹配的结点,
        1.如果某叶子结点匹配,则该枝叶保留;
        2.如果某非叶子结点符合条件,而叶子不符合条件,则会裁掉叶子(不足之处)

this.filterBtn = new Ext.Button({
		            text : '查询',
		            scope : this,
		            //iconCls:'silk-add',
		            //icon:ctx+'/images/task/buttonicon/addtask.gif',
		            handler : function(b, e) {
		                this.filterBy();
		            }
		        });
		        this.expandBtn = new Ext.Button({
		        	text : '展开全部',
		        	scope : this,
		        	handler : function(b, e) {
		        	this.tree.expandAll();
			        }
		        });
		        this.collapseBtn = new Ext.Button({
		        	text : '折叠全部',
		        	scope : this,
		        	handler : function(b, e) {
		        		this.tree.collapseAll();
		        	}
		        });
		        this.filterFieldName = new Ext.form.TextField({
		        	name:'fdcName'        	
		        });
		        this.tree.getTopToolbar().add(['功能名称:',this.filterFieldName,this.filterBtn,'->',this.expandBtn,this.collapseBtn]);
		        
				this.add(this.tree);
				this.treeFilter = new Ext.tree.TreeFilter(this.tree, {
			        clearBlank: true,
			        autoClear: true
			    });
				this.matched = [];
				this.filterBy = function(){
					var text = this.filterFieldName.getValue();
					this.treeFilter.clear();
					this.matched = [];
					//如果输入的数据不存在,就执行clear()
			        if(!text){
			            return;
			        }
			        this.tree.expandAll();
			        //根据输入制作一个正则表达式,'i'代表不区分大小写
			        var re = new RegExp(Ext.escapeRe(text), 'i');
			        //找出所有匹配的结点
			        this.tree.root.cascade(function(n) {
			        	if(re.test(n.attributes['fdcName'])){
			        		this.matched.push(n);
			        	}
			        },this);
			        //从每个叶子结点向根方向处理,处理所有结点的枝叶,
			        //如果该枝叶包含匹配的结点,则保留,否则裁剪掉(隐藏) 
			        this.tree.root.cascade(function(n) {
			            if(n.isLeaf()){
			            	//处理每一条子结点路径
			            	n.bubble(function(nbb){
			            		//从叶子到根,逐个剪掉
		            			var contain = false;
		            			for ( var mted = 0; mted < this.matched.length; mted++) {
		            				if(nbb.contains(this.matched[mted]) || nbb == this.matched[mted] ){
		            					//包含匹配的结点
		            					contain = true;
		            					break;
		            				}
								}
		            			//把不包含匹配结点的结点隐藏
		            			if(!contain){
		            				nbb.ui.hide();
		            				this.treeFilter.filtered[nbb.id]=nbb;
		            			}
			            	},this);			                
			            }
			        },this); 
				};
分享到:
评论

相关推荐

    EXT TreeFilter 插件

    EXT TreeFilter插件是EXT库中的一个强大工具,主要用于增强EXT的Tree组件的功能,特别是针对树形结构数据的快速搜索和过滤。EXT Tree是EXT框架中用于展示层次结构数据的组件,它通常用于构建具有多级目录结构的应用...

    根据输入的关键字过滤ext树节点

    本篇文章将深入探讨如何根据输入的关键字过滤Ext树节点,类似于MyEclipse中的preferences搜索框功能。 首先,理解“树节点过滤”(Tree Node Filtering)的概念。在ExtJS的树视图中,过滤功能允许用户通过输入...

    ext TreeFilter ext 写的快速检索

    TreeFilter是EXT Tree的一个扩展功能,它的主要任务是在树结构中进行实时过滤。当用户在搜索框中输入字符时,TreeFilter会自动遍历树的每一层,找到与输入字符匹配的节点,并隐藏不匹配的节点,从而快速呈现匹配结果...

    ext自定义树组件

    在EXT中,树组件(Tree Component)是一种常见的UI元素,用于展示层级结构的数据,如文件系统、组织结构或任何具有层次关系的信息。 自定义EXT树组件涉及到多个知识点,包括但不限于以下几点: 1. **组件创建**:...

    ext树实例代码

    从给定的文件信息中,我们可以深入探讨“ext树实例代码”这一主题,了解如何在Ext JS中详细应用tree控件。 ### 标题:ext树实例代码 #### 描述:ext中,tree控件的详细应用,实例。 ### 知识点解析: **1. Ext ...

    ext.net 中树加载及实现方式,初学者可以参考

    在EXT.NET框架中,树形控件(Tree)是一种常用的数据展示组件,它允许用户以层级结构展示数据。本文将详细介绍EXT.NET中的树加载及其实现方式,这对于初学者来说是一份很好的参考资料。 首先,EXT.NET中的树形控件...

    Ext tree build

    标题“Ext tree build”指的是在Ext JS框架中构建树形结构的过程。Ext JS是一个流行的JavaScript库,用于构建富客户端Web应用程序。它提供了丰富的组件库,其中包括用于显示层次数据的树形控件(Tree)。在本篇文章...

    TreeCombo,Ext TreeCombo 树形 下拉框,树形下拉框

    Ext TreeCombo是一种UI组件,它将传统的下拉框与树形控件(Tree)结合起来,提供了一种交互式的、具有层级结构的下拉选择。用户在输入框中输入文字,可以筛选出符合输入的树节点,同时,点击下拉按钮会展示整个树形...

    Ext用户扩展控件-----树形表格

    在ExtJS中,"树形表格"(Tree Grid)是一种结合了树视图和数据网格功能的复合控件,它允许用户同时查看数据的层次结构和表格形式,极大地提高了数据展示的灵活性和交互性。在本篇文章中,我们将深入探讨ExtJS中的树...

    Ext JS 树

    在Ext JS中,"树"(Tree)是一种数据展示组件,它允许用户以层级结构显示数据。树形结构常用于组织和导航大量的分类信息,例如文件系统、组织架构或者网站导航菜单。 在Ext JS中,树(TreePanel)是用于显示树数据...

    Ext表格控件和树控件

    ### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...

    Extjs教程_第八章_Tree(树)(2)

    - **Ext.tree.TreeEditor** 是一个内置工具,用于实现树节点的编辑功能。当你双击一个节点时,TreeEditor 会自动为该节点创建一个文本框(TextField)供用户编辑。 - 编辑完成后,并不会自动保存到服务器。你需要...

    EXT例子网格;树等等;都有

    都有",指的是这个压缩包中包含了EXT框架的各种示例,特别是关于网格(Grid)和树(Tree)的实例。EXT的网格组件用于展示数据,支持排序、分页、过滤等功能,常用于数据密集型的应用场景。而树组件则用于展示层次...

    ext 资源汇总

    这个"EXT 资源汇总"包含了一系列与EXT相关的组件,如表单(Ext.form)、网格(Ext.grid)和树形视图(tree)。这些组件是EXT的核心功能,允许开发者创建交互式的用户界面。 1. **EXT.form**: EXT.form模块提供了...

    extjs tree

    - **TreePanel**: 显示树形数据的容器,它继承自Ext.grid.Panel,并添加了树状布局和特有的功能。 - **Store**: 负责管理树的数据,可以是JSON或XML格式,包含节点的所有信息。 - **Model**: 定义树节点的数据...

    ext培训文档doc

    7. **EXT Tree**:EXT的树形视图组件适用于层次结构数据的展示,可以进行展开、折叠、拖放操作,常用于导航菜单或文件系统。 8. **EXT Theme**:EXT提供了多种主题样式,可以自定义皮肤,满足不同设计需求。同时,...

    Ext3.4 demo

    这个“Ext3.4无限极tree grid demo”是展示如何在Ext3.4中实现一个具有无限层级的树形网格视图,它结合了树结构和表格数据的显示,提供了灵活的数据组织和交互方式。 在Ext3.4中,Tree Grid是一种特殊的组件,它...

    ext treegrid

    Ext TreeGrid是一款在Ext JS框架下开发的组件,它结合了Tree和Grid的优点,提供了一种既能展示层次结构数据又能进行表格样式的显示和操作的视图。在Ext JS库中,Tree通常用于展现层级关系的数据,而Grid则用于显示二...

    Rails中应用Ext.tree:以中国的省市地区三级联动选择为例

    而Ext.js是一个JavaScript库,专门用于构建富前端应用,它提供了丰富的组件库,包括树形控件(Tree)等。 在文章中,作者可能会首先介绍如何设置Rails项目,确保已经正确安装了所需的依赖,比如jQuery和Ext.js库。...

    Ext 开发指南 学习资料

    3.10. 树形过滤器TreeFilter 3.11. TreeSorter对树形排序 4. 祝福吧!把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 ...

Global site tag (gtag.js) - Google Analytics