`
pingfan
  • 浏览: 38300 次
  • 性别: 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树节点

    根据输入的关键字过滤ext树节点(类似myeclipse中preferences中上的搜索框),可输入节点首字母或中文进行过滤

    EXT TreeFilter 插件

    EXT TreeFilter 插件 提供ext的tree 快速搜索功能 超简单好用~ 支持拼音首字母和中文模糊查询

    ext TreeFilter ext 写的快速检索

    输入拼音首字母或者汉字都可以对树结点进行过滤 过滤仅对子节点有效 快速检索

    Ext 开发指南 学习资料

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

    Ext Js权威指南(.zip.001

    7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...

    基于EXT SSI的简单树实现

    一个基于EXT实现的树,先上图。 动态加载加右键菜单。 希望拿到可以跑起来看看效果的,需要按以下步骤做。 1 安装oracle,这个例子只做了oracle版本,如果需要,后期可以加上mysql版本,呵呵。 2 运行建用户及表...

    精通JS脚本之ExtJS框架.part1.rar

    10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...

    精通JS脚本之ExtJS框架.part2.rar

    10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...

    ExtAspNet_v2.3.2_dll

    -重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...

    extjs-reactjs-examples:ExtJS到React过渡的代码示例

    Ext JS-&gt; React示例 这些代码示例支持上的Ext JS to React博客文章。 以下是本系列所涵盖主题的概述...使用React (代码) 加载,排序和过滤数据 使用Redux处理数据(代码) 使用MobX处理数据(代码) 图表(代码)

    Linux指令一周通 (技术图书大系).azw3

    3.56 tree指令:以树状图显示目录内容 3.57 umount指令:卸除文件系统 第4天 网络通信指令 4.1 apachectl指令:apache HTTP服务器控制接口 4.2 arp指令:地址转换协议 4.3 arping指令:ARP请求报文 4.4 arpwatch指令...

Global site tag (gtag.js) - Google Analytics