Ext tree 树的过滤

最新推荐文章于 2018-06-14 09:22:00 发布

最新推荐文章于 2018-06-14 09:22:00 发布 · 349 阅读

文章标签：

#EXT #正则表达式 #JavaScript #UI #ViewUI

extjs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在树形结构中使用关键字进行节点筛选的方法。通过遍历树节点并使用正则表达式来查找匹配关键字的节点，再进一步判断是否保留整个分支。此方法适用于动态过滤大量树状数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据关键字查询树中任意匹配的结点,
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); 
				};