Extjs TreeFilter 根据关键字过滤树

jQuery MiniUI 开发教程 树形控件 树操作：过滤树（十一）

过滤树           

                   

参考示：过滤树

 

 

                       

filter节点过滤          

 

tree.filter(function (node) {

    var text = node.text ? node.text.toLowerCase() : "";

    if (text.indexOf(key) != -1) {

        return true;

    }

});

          

clearFilter取消过滤         

 

tree.clearFilter();

 

Ext 树过滤 tree filter 多余 二级目录 bug 问题

出处：http://blog.sina.com.cn/s/blog_68141ec50100juhn.html

ext的tree的filter即搜索功能，按照ext的API写有一个bug，当节点下有二级子节点的时候，filter其它节点，不论此节点是否满足filter条件，都会出现，搞了半天才将这个bug解决掉，现在记下来，以备以后用到。

原代码:

 

hiddenPkgs = [];

        tree.root.cascade(function(n) {

            if(!n.isLeaf()&& n.ui.ctNode.offsetHeight<3){

                n.ui.hide();

                hiddenPkgs.push(n);

            }

       });

bug主要出在这段控制隐藏的代码上，其中关键是n.ui.ctNode.offsetHeight<3，当节点有子节点的时候，他的n.ui.ctNode.offsetHeight就会大于3，所以会显示。修改这个bug，只需要修改这段代码即可。在源过滤条件后面加个条件，修改后的代码如下：

修改一：只支持对叶子的搜索，不支持对枝干的搜索

hiddenPkgs = [];

        tree.root.cascade(function(n) {

            if(!n.isLeaf()&& n.ui.ctNode.offsetHeight<3&& !re.test(n.text)){

                n.ui.hide();

                hiddenPkgs.push(n);

            }

            if(n.id!='root'){

                if(!n.isLeaf() && n.ui.ctNode.offsetHeight >= 3 && hasChild(n,re)==false&& !re.test(n.text)){

                    n.ui.hide();

                    hiddenPkgs.push(n);

                }

            }

        });

       

        function hasChild(n,re){

         var str=false;

         n.cascade(function(n1){

              if(n1.isLeaf() && re.test(n1.text)){

                  str = true;

                  return;

              }

          });

          return str;

       }

    }

修改二：支持对叶子、枝干的搜索。

var hiddenPkgs = [];

    var filter = new Ext.tree.TreeFilter(tree, {

        clearBlank: true,

          autoClear: true

    });

    function filterTree(){

       

          var text = members_name.getValue();

          Ext.each(hiddenPkgs, function(n){

            n.ui.show();

        });

 

        if(!text){

            filter.clear();         

            return;

        } 

 

        tree.expandAll();

        var re = new RegExp(Ext.escapeRe(text), 'i');

      

        filter.filterBy(function(n){

             var textval = n.text;

            return !n.isLeaf() || re.test(n.text);

        });

 

        // hide empty packages that weren't filtered

        hiddenPkgs = [];

        tree.root.cascade(function(n) {

            if(!n.isLeaf()&& n.ui.ctNode.offsetHeight<3&& !re.test(n.text)){

                n.ui.hide();

                hiddenPkgs.push(n);

            }

            if(n.id!='root'){

                if(!n.isLeaf() && n.ui.ctNode.offsetHeight >= 3 && hasChild(n,re)==false&& !re.test(n.text)){

                    n.ui.hide();

                    hiddenPkgs.push(n);

                }

            }

        });

       

        function hasChild(n,re){

            var str=false;

            n.cascade(function(n1){

                 if(re.test(n1.text)){

                     str = true;

                     return;

                 }

             });

             return str;

       }

    }

修改二与修改一是有区别的，并且修改二不能取代修改一，因为，修改一也有应用点，如：如果只让用户对叶子进行搜索那么应该是当搜索枝干时应该没有结果，若用修改二则不很好，用修改一更合理

 

 

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

                            }  

                        });  

         });