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

转载于:https://www.cnblogs.com/symbol8888/p/8257455.html