[Ext扩展]QM.ux.TreeFilter：树节点智能过滤,添加中文模糊匹配功能

Ext自带一个Ext.tree.TreeFilter类，可以实现树节点的过滤，但是功能太单薄了。我自己实现了一个树的过滤功能，支持以下功能：

• 过滤时忽略父节点，默认情况下忽略
• 中文、拼音首字母过滤，你输中文就按照中文进行匹配，输拼音就按照首字母匹配
• 过滤后自动展开匹配结点的所有父节点
• 匹配字符串为空时将结点全部显示，可配置全部显示时结点状态为全收缩还是全展开，默认不处理
• 拼音缓存：确保汉字只转一次拼音，提高效率

1.1 改动：
1.支持中文模糊匹配，输入汉字可以是字符串任意位置

注意事项：
1.循环遍历操作，树节点过多会卡
2.这是前台过滤，请保证过滤前所有结点加载完毕

考虑到新手，附件的例子直接下载到Ext根目录下用浏览器打开即可查看

初始状态：

汉字匹配：

拼音首字母匹配：

评论

9 楼 -惜帅- 2013-05-08  

-惜帅- 写道

楼主，貌似过滤的时候，有些节点查不出来啊，不知道是哪里出问题了？
比如组织架构中有N个部门是“...部”，输入“部”后，只出来一个，其他的都显示不了，全称也不行，拼音也不行，麻烦解答下

测试后发现，原来是查找的只能是叶子节点，非叶子节点就不行，后来我自己在楼主代码基础上，改了下，增加个属性 includeFolder ，判断是否包含非叶子节点，这个参数由构造的config传入，  并增加了判断

includeFolder:false,//过滤时，是否包含非叶子节点

//private get the matchs and hide other nodes
	filterAll:function(fn,startNode){
		var arr = [];
		startNode = startNode||this.tree.root;				
		startNode.cascade(function(n){
			if(!n.leaf){
				n.expand(false,false);
				if (!this.includeFolder&&this.ignoreFolder) {
					n.ui.hide();
					return;
				}	
			}
			if(fn.call(this,n)){
				arr.push(n);	
			}
			else{
				n.ui.hide();
			}
		},this);
		this.matches = arr;
	},

请指正，谢谢！

8 楼 -惜帅- 2013-05-08  

楼主，貌似过滤的时候，有些节点查不出来啊，不知道是哪里出问题了？
比如组织架构中有N个部门是“...部”，输入“部”后，只出来一个，其他的都显示不了，全称也不行，拼音也不行，麻烦解答下

7 楼 八岭书生 2012-01-11  

楼主写得非常好啊  如果里面的数据是从后台获取的

loader: new Ext.tree.TreeLoader({
       dataUrl:'testTree.do?json=1'
}),

root: new Ext.tree.AsyncTreeNode({
    text: '测试组',
    draggable:false,
    id:'0'
})

那该怎么弄啊

希望楼主百忙中抽空 为我解答下

6 楼 haorb 2011-11-30  

非常的不错，有借鉴价值，谢谢了

5 楼 fh2002 2010-10-27  

good，没问题
再加上
http://blog.csdn.net/zhaoqiliang527/archive/2010/09/13/5880729.aspx
的使用更简单了。

4 楼 mingchong2882 2010-09-02  

不以用，EXT3.2

3 楼 0obeiiedo0 2010-08-18  

很不错的例子！  得研看研看

2 楼 meteorzc 2010-08-18  

非常的不错

1 楼 toyanjie 2010-07-29  

下载不了. 麻烦楼主看下.. 写写.