博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Extjs Tree增加搜索功能
阅读量:6691 次
发布时间:2019-06-25

本文共 2171 字,大约阅读时间需要 7 分钟。

  hot3.png

// 1.第一步:增加一个搜索框到TreePanel tbar tbar:[' ',          new Ext.form.TextField({                width:350,                emptyText:'请输入关键字检索',                enableKeyEvents: true,                listeners:{                    keyup:function(node, event) {                        findByKeyWordFiler(node, event);                    },                    scope: this                }            })  ],// 2.第二步:增加搜索方法//--------------Tree filter implement---------------BEGvar treeFilter = new Ext.tree.TreeFilter(tree, {      clearBlank : true,      autoClear : true  });  var timeOutId  = null;  var hiddenPkgs = [];  var findByKeyWordFiler = function(node, event) {      clearTimeout(timeOutId);// 清除timeOutId      tree.expandAll();// 展开树节点      // 为了避免重复的访问后台,给服务器造成的压力,采用timeOutId进行控制,如果采用treeFilter也可以造成重复的keyup      timeOutId = setTimeout(function() {          // 获取输入框的值          var text = node.getValue();          // 根据输入制作一个正则表达式,'i'代表不区分大小写          var re = new RegExp(Ext.escapeRe(text), 'i');          // 先要显示上次隐藏掉的节点          Ext.each(hiddenPkgs, function(n) {              n.ui.show();          });          hiddenPkgs = [];          if (text != "") {              treeFilter.filterBy(function(n) {                  // 只过滤叶子节点,这样省去枝干被过滤的时候,底下的叶子都无法显示                  return !n.isLeaf() || re.test(n.text);              });              // 如果这个节点不是叶子,而且下面没有子节点,就应该隐藏掉              tree.root.cascade(function(n) {                  if(n.id!='0'){                      if(!n.isLeaf() &&judge(n,re)==false&& !re.test(n.text)){                          hiddenPkgs.push(n);                          n.ui.hide();                      }                  }              });          } else {              treeFilter.clear();              return;          }      }, 500);  }  // 过滤不匹配的非叶子节点或者是叶子节点  var judge =function(n,re){      var str=false;      n.cascade(function(n1){          if(n1.isLeaf()){              if(re.test(n1.text)){ str=true;return; }          } else {              if(re.test(n1.text)){ str=true;return; }          }      });      return str;  };});//--------------Tree filter implement---------------END

转载于:https://my.oschina.net/moks/blog/524947

你可能感兴趣的文章
阿里云对象存储OSS支持版本管理特性
查看>>
用python 访问redis的几种常用方式
查看>>
我的友情链接
查看>>
Linux Shell 基本概念及编程(5)
查看>>
RDBMS DBMS MS DB
查看>>
我的友情链接
查看>>
svn 实践
查看>>
在 PowerShell 中使用 SQL Server (3)
查看>>
我的友情链接
查看>>
CSS元素定位
查看>>
质量时代——“Jolt大奖精选丛书”有奖征文
查看>>
Python list方法总结
查看>>
DNS服务器维护命令
查看>>
六、用户与权限
查看>>
面向机器学习数据平台的设计与搭建
查看>>
centos6.7 编译安装mysql-5.6.27
查看>>
spring cloud 整合zpkin问题
查看>>
Maven下载慢的解决方案
查看>>
我的友情链接
查看>>
Android 核心分析 之七------Service深入分析
查看>>