转载: 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. }

实现效果图

Extjs tree 过滤查询功能的更多相关文章

  1. Extjs treePanel过滤查询功能【转】

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

  2. 在ASP.NET Core中通过EF Core实现一个简单的全局过滤查询

    前言 不知道大家是否和我有同样的问题: 一般在数据库的设计阶段,会制定一些默认的规则,其中有一条硬性规定就是一定不要对任何表中的数据执行delete硬删除操作,因为每条数据对我们来说都是有用的,并且是 ...

  3. 在Winform界面中使用DevExpress的TreeList实现节点过滤查询的两种方式

    在我较早的一篇随笔<在DevExpress程序中使用TeeList控件以及节点查询的处理>中,介绍了在树形列表TreeList控件上面,利用SearchControl实现节点的模糊查询过滤 ...

  4. 【设计过程】.NET ORM FreeSql WhereDynamicFilter 动态表格查询功能

    前言 最近几乎每天40度,越热越不想面对电脑,还好开源项目都比较稳定没那么多待解决问题,趁着暑假带着女儿学习游泳已略有小成.游泳好处太多了,建议有孩子的都去学学,我是在岸边指导大约一周左右就学会了,目 ...

  5. 创建ASP.NET Core MVC应用程序(5)-添加查询功能 & 新字段

    创建ASP.NET Core MVC应用程序(5)-添加查询功能 & 新字段 添加查询功能 本文将实现通过Name查询用户信息. 首先更新GetAll方法以启用查询: public async ...

  6. 完善ext.grid.panel中的查询功能(紧接上一篇)

    今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

  7. WebService和AngularJS实现模糊过滤查询

    WebService和AngularJS实现模糊过滤查询   [概要] 网上看到一个不错的帖子,用WebService获取json,然后在前端使用AngularJs进行过滤搜索,看完文章后,按自己的想 ...

  8. FreeSql 新查询功能介绍

    FreeSql FreeSql 是一个功能强大的 NETStandard 库,用于对象关系映射程序(O/RM),提供了 CodeFirst/DbFirst/CURD/表达式函数/读写分离 等基础封装. ...

  9. Vc数据库编程基础MySql数据库的表查询功能

    Vc数据库编程基础MySql数据库的表查询功能 一丶简介 不管是任何数据库.都会有查询功能.而且是很重要的功能.上一讲知识简单的讲解了表的查询所有. 那么这次我们需要掌握的则是. 1.使用select ...

随机推荐

  1. EventProxy流程控制

    EventProxy流程控制 EventProxy是一个通过控制事件触发顺序来控制业务流程的工具. 1. 利用事件机制解耦复杂业务逻辑2. 移除被广为诟病的深度callback嵌套问题3. 将串行等待 ...

  2. C#设计模式六大原则——接口隔离

    接口隔离定义: 一般有两种定义: 1:客户端不应该依赖他不需要的接口     2:类间的依赖关系应该建立在最小的接口上 我们在建立接口时,应该尽量建立单一,不臃肿庞大的接口,应尽量使接口细化,方法尽量 ...

  3. 使用DOM创建xml文件

    使用DOM创建xml文件 创建xml的代码如下: public class CreateXML { public static void main(String[] args) { DocumentB ...

  4. PECL: configuration option "php_ini" is not set to php.ini location

    message similar to: configuration option "php_ini" is not set to php.ini locationYou shoul ...

  5. Java Web整合开发王者归来(JSP + Servlet + Struts + Hibernate + Spring) - 读书笔记

    第1章 状态码表示响应类型: 保留 表示请求成功地接收 完成请求客户需进一步细化请求 客户错误 服务器错误 Web服务器: Apache服务器,特长是处理静态页面,效率非常高. Tomcat提供对JS ...

  6. python学习之老男孩python全栈第九期_数据库day004 -- 作业

    https://www.cnblogs.com/YD2018/p/9451809.html 11. 查询学过“001”并且也学过编号“002”课程的同学的学号.姓名 select student.si ...

  7. PHPCMS v9上传图片提示"undefined"的解决办法

    把phpcms\modules\attachment\attachments.php中将 if(empty($this->userid)){改成 if(empty($_POST['userid' ...

  8. JAVA 判断字符串是否可转化为JSONObject、JSONArray

    有时,我们需要判断字符串在转化为JSON对象或者JSONArray时,我们可以使用JSONObject.parseObject和JSONArray.parseArray,但是有时候我们需要在转化之前判 ...

  9. WDCP上传SSL证书

    1.在线申请SSL证书 2.网站管理>SSL证书上传 3.将key文件直接上传,cert文件内容复制到crt文件中,再上传 4.开启https 注意:同一个域名下解析的若干域名,只能走主域名的证 ...

  10. Android开发时,那些相见恨晚的工具或网站!

    本文来我在知乎话题Android开发时你遇到过什么相见恨晚的工具或网站?下的回答! 在实际Android开发过程确实会有很多相见恨晚的工具或网站出现,下面是我自己的一些分享. 1.源码网站 https ...