ExtjstreePanel如何实现长尾词查询功能？

本文共计444个文字，预计阅读时间需要2分钟。

在ExtJS 4.2中，treeStore尚未实现filterBy函数，同时也没有继承自Ext.data.Store。因此，需要对treeStore进行自定义实现，并确保其与treePanel的过滤功能兼容。

Extjs4.2中对于treeStore中未实现filterBy函数进行实现treestore并未继承与Ext.data.Store,对于treeP

 

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 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 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 tabllepanelExt.ComponentQuery.query(auditruleview treepanel[namedataTables])[0]; var selModel tabllepanel.getSelectionModel(); selModel.select(e,true); if(!e.isLeaf()){ e.expand(); } } searchTables(e.childNodes,value); }); }

实现效果图

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

转:www.cnblogs.com/symbol8888/p/8257455.html