Extjs TreeFilter 根据关键字过滤树


Extjs TreeFilter 根据关键字过滤树

 

var tbar = new Ext.Toolbar({
				buttonAlign : 'center',
				items : [{xtype : 'textfield',emptyText : '根据企业名称检索企业...',id:'filter_input',width : 200}]
			});

this.userTreepanel = new Ext.tree.TreePanel({
             renderTo : 'tree_menu_'+this.pageId,
             region:'north',
             title:'用能单位树',
             split:true,
             width: 210,
             tbar : tbar,
             height : (this.getBodyHeight(0)-10),
             collapsible: false,
             margins:'5 0 5 0',
             loader: this.treeLoader,
             rootVisible:true,
             lines: false,
             singleClickExpand : true,
             autoScroll:true,
             root: new Ext.tree.AsyncTreeNode({text:"企业树",id:'-1',expanded:true}),
            listeners: {            
		           'click' : function(node,e) {
		           		Main.getPageControler().treeNodeClicked(node);
		           	 	Main.getPageControler().commit(node);
		           }
       		}      
         });
         
         var tree = this.userTreepanel;
         var filter = new Ext.tree.TreeFilter(tree, {
				clearBlank : true,
				autoClear : true
			});
		
		 // 保存上次隐藏的空节点
		 var hiddenPkgs = [];
         var field = Ext.get('filter_input');
         field.on('keyup', function(e) {
         	var text = field.dom.value;

				// 先要显示上次隐藏掉的节点
				Ext.each(hiddenPkgs, function(n) {
							n.ui.show();
						});

				// 如果输入的数据不存在,就执行clear()
				if (!text) {
					filter.clear();
					return;
				}
				tree.expandAll();

				// 根据输入制作一个正则表达式,'i'代表不区分大小写
				var re = new RegExp(Ext.escapeRe(text), 'i');
				filter.filterBy(function(n) {
							// 只过滤叶子节点,这样省去枝干被过滤的时候,底下的叶子都无法显示
							return !n.isLeaf() || re.test(n.text);
						});

				// 如果这个节点不是叶子,而且下面没有子节点,就应该隐藏掉
				hiddenPkgs = [];
				tree.root.cascade(function(n) {
							if (!n.isLeaf() && n.ui.ctNode.offsetHeight < 3) {
								n.ui.hide();
								hiddenPkgs.push(n);
							}
						});
         });
 

 

你可能感兴趣的:(TreeFilter)