Extjs tree 过滤查询功能

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

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'

1. /**
2. * Created by bcm on 14-6-30.
3. */
4. Ext.define('Juliet.util.TreeFilter', {
5. filterByText: function(text) {
6. this.filterBy(text, 'text');
7. },
8. /**
9. * 根据字符串过滤所有的节点，将不符合条件的节点进行隐藏.
10. * @param 查询字符串.
11. * @param 要查询的列.
12. */
13. filterBy: function(text, by) {
14. debugger;
15. this.clearFilter();
16. var view = this.getView(),
17. me = this,
18. nodesAndParents = [];
19. // 找到匹配的节点并展开.
20. // 添加匹配的节点和他们的父节点到nodesAndParents数组.
21. this.getRootNode().cascadeBy(function(tree, view) {
22. var currNode = this;
23. if (currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) {
24. me.expandPath(currNode.getPath());
25. while (currNode.parentNode) {
26. nodesAndParents.push(currNode.id);
27. currNode = currNode.parentNode;
28. }
29. }
30. }, null, [me, view]);
31. // 将不在nodesAndParents数组中的节点隐藏
32. this.getRootNode().cascadeBy(function(tree, view) {
33. var uiNode = view.getNodeByRecord(this);
34. if (uiNode && !Ext.Array.contains(nodesAndParents, this.id)) {
35. Ext.get(uiNode).setDisplayed('none');
36. }
37. }, null, [me, view]);
38. },
39. clearFilter: function() {
40. var view = this.getView();
41. this.getRootNode().cascadeBy(function(tree, view) {
42. var uiNode = view.getNodeByRecord(this);
43. if (uiNode) {
44. Ext.get(uiNode).setDisplayed('table-row');
45. }
46. }, null, [this, view]);
47. }
48. });

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

1 2 3 4 5

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

调用方法：treepanel.filterByText('xxx') 或treepanel.filterBy('xxx','列名') 进行过滤查询

实现结果图：

二：searchTables函数

实现思路：

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

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

1. // treepanel 模糊查询 ，展开树型结构，选中匹配项
2. function searchTables(tree,value){
3. tree.forEach(function(e){
4. var content = e.raw.text;
5. var re = new RegExp(Ext.escapeRe(value), 'i');
6. if(re.test(content)||re.test(content.toUpperCase())){
7. e.parentNode.expand();
8. var tabllepanel=Ext.ComponentQuery.query('auditruleview treepanel[name=dataTables]')[0];
9. var selModel = tabllepanel.getSelectionModel();
10. selModel.select(e,true);
11. if(!e.isLeaf()){
12. e.expand();
13. }
14. }
15. searchTables(e.childNodes,value);
16. });
17. }

实现效果图