Extjs Tree增加搜索功能

标签：

// 1.第一步：增加一个搜索框到TreePanel tbar

 tbar:[‘ ‘,
          new Ext.form.TextField({  
              width:350,  
              emptyText:‘请输入关键字检索‘,  
              enableKeyEvents: true,  
              listeners:{  
                  keyup:function(node, event) {  
                      findByKeyWordFiler(node, event);  
                  },  
                  scope: this  
              }  
          })  
],

// 2.第二步：增加搜索方法

//--------------Tree filter implement---------------BEG
var treeFilter = new Ext.tree.TreeFilter(tree, {  
    clearBlank : true,  
    autoClear : true  
});  

var timeOutId  = null;  
var hiddenPkgs = [];  

var findByKeyWordFiler = function(node, event) {  
    clearTimeout(timeOutId);// 清除timeOutId  
    tree.expandAll();// 展开树节点  
    // 为了避免重复的访问后台，给服务器造成的压力，采用timeOutId进行控制，如果采用treeFilter也可以造成重复的keyup  
    timeOutId = setTimeout(function() {  
        // 获取输入框的值  
        var text = node.getValue();  
        // 根据输入制作一个正则表达式，‘i‘代表不区分大小写  
        var re = new RegExp(Ext.escapeRe(text), ‘i‘);  
        // 先要显示上次隐藏掉的节点  
        Ext.each(hiddenPkgs, function(n) {  
            n.ui.show();  
        });  
        hiddenPkgs = [];  
        if (text != "") {  
            treeFilter.filterBy(function(n) {  
                // 只过滤叶子节点，这样省去枝干被过滤的时候，底下的叶子都无法显示  
                return !n.isLeaf() || re.test(n.text);  
            });  
            // 如果这个节点不是叶子，而且下面没有子节点，就应该隐藏掉  
            tree.root.cascade(function(n) {  
                if(n.id!=‘0‘){  
                    if(!n.isLeaf() &&judge(n,re)==false&& !re.test(n.text)){  
                        hiddenPkgs.push(n);  
                        n.ui.hide();  
                    }  
                }  
            });  
        } else {  
            treeFilter.clear();  
            return;  
        }  
    }, 500);  
}  

// 过滤不匹配的非叶子节点或者是叶子节点  
var judge =function(n,re){  
    var str=false;  
    n.cascade(function(n1){  
        if(n1.isLeaf()){  
            if(re.test(n1.text)){ str=true;return; }  
        } else {  
            if(re.test(n1.text)){ str=true;return; }  
        }  
    });  
    return str;  
};

});

//--------------Tree filter implement---------------END

Extjs Tree增加搜索功能

标签：

原文地址：http://my.oschina.net/moks/blog/524947