zoukankan      html  css  js  c++  java
  • Extjs treePanel过滤查询功能【转】

    Extjs4.2中,对于treeStore中未实现filterBy函数进行实现,treestore并未继承与Ext.data.Store,对于treePanel的过滤查询功能,可有以下两种实现思路:

    一:FilterBy函数

    实现思路:

    1)对于treestore 结构类型,extjs提供了专门的迭代函数cascadeBy函数,用于对树型节点进行迭代

    2)迭代树型结构,在回调函数中,判断是否存在所查询内容,如果存在,将节点的id数组里。

    3)再次迭代树型结构,将不在数据里的节点进行隐藏。

    4)每次查询过程中,将所有节点设置可见。

    注:在extjs中,对于界面元素的操作,可利用Ext.dom.Element对界面元素dom进行显示操作。

    首先定义一个类'MyExtend.lib.TreeFilter'

    /** 
     * Created by bcm on 14-6-30. 
     */  
    Ext.define('MyExtend.lib.TreeFilter', {  
        filterByText: function(text) {  
            this.filterBy(text, 'text');  
        },  
        /** 
         * 根据字符串过滤所有的节点,将不符合条件的节点进行隐藏. 
         * @param 查询字符串. 
         * @param 要查询的列. 
         */  
        filterBy: function(text, by) {  
            // debugger;  
            this.clearFilter();  
      
            var view = this.getView(),  
                me = this,  
                nodesAndParents = [];  
      
            // 找到匹配的节点并展开.  
            // 添加匹配的节点和他们的父节点到nodesAndParents数组.  
            this.getRootNode().cascadeBy(function(tree, view) {  
                var currNode = this;  
      
                if (currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) {  
                    me.expandPath(currNode.getPath());  
      
                    while (currNode.parentNode) {  
                        nodesAndParents.push(currNode.id);  
                        currNode = currNode.parentNode;  
                    }  
                }  
            }, null, [me, view]);  
      
            // 将不在nodesAndParents数组中的节点隐藏  
            this.getRootNode().cascadeBy(function(tree, view) {  
                var uiNode = view.getNodeByRecord(this);  
      
                if (uiNode && !Ext.Array.contains(nodesAndParents, this.id)) {  
                    Ext.get(uiNode).setDisplayed('none');  
                }  
            }, null, [me, view]);  
        },  
      
      
        clearFilter: function() {  
            var view = this.getView();  
            this.getRootNode().cascadeBy(function(tree, view) {  
                var uiNode = view.getNodeByRecord(this);  
      
                if (uiNode) {  
                    Ext.get(uiNode).setDisplayed('table-row');  
                }  
            }, null, [this, view]);  
        }  
    });  

    接下来定义一个你自己的treepanel,并混入这个类

    Ext.define('MyTreePanel',{
        extend:'Ext.tree.Panel',
        mixins:['MyExtend.lib.TreeFilter']
         
    });

    实现结果图:

    二:searchTables函数

    实现思路:

    1)循环迭代树型结构,利用正则表达式进行匹配,对于匹配的节点进行展开并选中。

    2)再以此迭代节点的子节点,匹配节点进行展开并选中。

    // treepanel 模糊查询 ,展开树型结构,选中匹配项  
    function searchTables(tree,value){  
        tree.forEach(function(e){  
            var content = e.raw.text;  
            var re = new RegExp(Ext.escapeRe(value), 'i');  
            if(re.test(content)||re.test(content.toUpperCase())){  
                e.parentNode.expand();  
                var tabllepanel=Ext.ComponentQuery.query('auditruleview treepanel[name=dataTables]')[0];  
                var selModel = tabllepanel.getSelectionModel();  
                selModel.select(e,true);  
                if(!e.isLeaf()){  
                    e.expand();  
                }  
            }  
             searchTables(e.childNodes,value);  
        });  
    }  

    实现效果图:

    转自 : http://blog.csdn.net/xiaobai51509660/article/details/36011899

  • 相关阅读:
    建站手册-网站构建:首页
    snort-2.9.7.0源码安装过程
    java实现最大镜像子串
    java实现最大镜像子串
    java实现最大五个数
    java实现最大五个数
    java实现最大五个数
    java实现最大五个数
    java实现最大五个数
    java实现祖冲之割圆法
  • 原文地址:https://www.cnblogs.com/symbol8888/p/8257455.html
Copyright © 2011-2022 走看看