当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

Extjs TreeFilter 根据关键字过滤树

发表于: 2014-01-21   作者:ckf53390   来源:转载   浏览次数:
摘要: jQuery MiniUI 开发教程 树形控件 树操作:过滤树(十一) 过滤树                                参考示:过滤树          

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

                            }  

                        });  

         });

Extjs TreeFilter 根据关键字过滤树

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
var tbar = new Ext.Toolbar({ buttonAlign : 'center', items : [{xtype : 'textfield',emptyText
Ext自带一个Ext.tree.TreeFilter类,可以实现树节点的过滤,但是功能太单薄了。我自己实现了一个树的
最近写了一个关键字过滤器,也就是脏字过滤,由于是新手,所以效率大家可能不敢恭维。 不过总算是实
最近写了一个关键字过滤器,也就是脏字过滤,由于是新手,所以效率大家可能不敢恭维。 不过总算是实
先说下本项目使用struts2+hibernate+Extjs3.* 将整个项目搭建起来后,我的项目整体架构如下图片 其
Extjs 右击菜单效果图 ExtJs Tree显示 var zzjgTreePanel = Ext.createWidget('treepanel', { store
EXTJS动态树的实现举例 一、描述:通过dwr实现JS与后台的交互,从而实现动态树中叶子节点和目录节点
EXTJS动态树的实现举例 一、描述:通过dwr实现JS与后台的交互,从而实现动态树中叶子节点和目录节点
EXTJS动态树的实现举例 一、描述:通过dwr实现JS与后台的交互,从而实现动态树中叶子节点和目录节点
直接上代码: Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor : function(cfg) {
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号