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);
							}
						});
         });

 

 

评论

3 楼 henchong 2013-01-07  

resp 写道

henchong 写道

extjs tree一次性加载数据量太多。。搜索该怎么解决呀，直接页面就未响应了

你好，这个你可以在后台实现过滤，把得到的结构在树上展示就可以了。以上示例只适合客户端过滤。

嗯，已经解决了，直接在后台过滤拼接成tree结构的。。谢谢

2 楼 resp 2012-10-31  

henchong 写道

extjs tree一次性加载数据量太多。。搜索该怎么解决呀，直接页面就未响应了

你好，这个你可以在后台实现过滤，把得到的结构在树上展示就可以了。以上示例只适合客户端过滤。

1 楼 henchong 2012-10-26  

extjs tree一次性加载数据量太多。。搜索该怎么解决呀，直接页面就未响应了