Extjs treePanel filter query function [transfer]

In Extjs4.2, the filterBy function is not implemented in TreeStore, and TreeStore does not inherit from Ext.data.Store. For the filtering and query function of treePanel, there are two implementation ideas as follows:

1: FilterBy function

Implementation ideas:

1) For the treestore structure type, extjs provides a special iterative function, cascade by function, which is used to iterate over tree nodes

2) Iterative tree structure, in the callback function, judge whether there is the query content, if there is, put the id array of the node.

3) The tree structure is iterated again to hide the nodes that are not in the data.

4) During each query, all nodes are visible.

Note: in extjs, for the operation of interface elements, you can use Ext.dom.Element to display the interface element dom.

First define a class' MyExtend.lib.TreeFilter '

/** 
 * Created by bcm on 14-6-30. 
 */  
Ext.define('MyExtend.lib.TreeFilter', {  
    filterByText: function(text) {  
        this.filterBy(text, 'text');  
    },  
    /** 
     * Filter all nodes according to string and hide unqualified nodes 
     * @param Query string 
     * @param Columns to query 
     */  
    filterBy: function(text, by) {  
        // debugger;  
        this.clearFilter();  
  
        var view = this.getView(),  
            me = this,  
            nodesAndParents = [];  
  
        // Find matching nodes and expand.  
        // Add matching nodes and their parent nodes to nodesAndParents array.  
        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]);  
  
        // Will not be in nodesAndParents Hidden nodes in array  
        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]);  
    }  
});  

Next, define your own treepanel, and mix it into this class

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

Implementation result chart:

2: searchTables function

Implementation ideas:

1) Loop iterative tree structure, use regular expression to match, expand and select the matching nodes.

2) Then the sub nodes of this iterative node are expanded and selected by matching nodes.

// treepanel Fuzzy query, expand tree structure and select matching items  
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);  
    });  
}  

Implementation effect diagram:

From: http://blog.csdn.net/xiaobai51509660/article/details/36011899

Tags: Java

Posted on Mon, 04 May 2020 01:36:21 -0400 by mayfair