Ext tree 树的过滤

根据关键字查询树中任意匹配的结点,
1.如果某叶子结点匹配,则该枝叶保留;
2.如果某非叶子结点符合条件,而叶子不符合条件,则会裁掉叶子(不足之处)

this.filterBtn = new Ext.Button({
text : '查询',
scope : this,
//iconCls:'silk-add',
//icon:ctx+'/images/task/buttonicon/addtask.gif',
handler : function(b, e) {
this.filterBy();
}
});
this.expandBtn = new Ext.Button({
text : '展开全部',
scope : this,
handler : function(b, e) {
this.tree.expandAll();
}
});
this.collapseBtn = new Ext.Button({
text : '折叠全部',
scope : this,
handler : function(b, e) {
this.tree.collapseAll();
}
});
this.filterFieldName = new Ext.form.TextField({
name:'fdcName'
});
this.tree.getTopToolbar().add(['功能名称:',this.filterFieldName,this.filterBtn,'->',this.expandBtn,this.collapseBtn]);

this.add(this.tree);
this.treeFilter = new Ext.tree.TreeFilter(this.tree, {
clearBlank: true,
autoClear: true
});
this.matched = [];
this.filterBy = function(){
var text = this.filterFieldName.getValue();
this.treeFilter.clear();
this.matched = [];
//如果输入的数据不存在,就执行clear()
if(!text){
return;
}
this.tree.expandAll();
//根据输入制作一个正则表达式,'i'代表不区分大小写
var re = new RegExp(Ext.escapeRe(text), 'i');
//找出所有匹配的结点
this.tree.root.cascade(function(n) {
if(re.test(n.attributes['fdcName'])){
this.matched.push(n);
}
},this);
//从每个叶子结点向根方向处理,处理所有结点的枝叶,
//如果该枝叶包含匹配的结点,则保留,否则裁剪掉(隐藏)
this.tree.root.cascade(function(n) {
if(n.isLeaf()){
//处理每一条子结点路径
n.bubble(function(nbb){
//从叶子到根,逐个剪掉
var contain = false;
for ( var mted = 0; mted < this.matched.length; mted++) {
if(nbb.contains(this.matched[mted]) || nbb == this.matched[mted] ){
//包含匹配的结点
contain = true;
break;
}
}
//把不包含匹配结点的结点隐藏
if(!contain){
nbb.ui.hide();
this.treeFilter.filtered[nbb.id]=nbb;
}
},this);
}
},this);
};
基于EXT框架的JSON树型表结构生成与实战应用 创建一个最基本的实例,首先需要引入必要的类依赖,并确保页面上下文已正确加载 ExtJS 库。以下是一个典型的树形面板定义示例:title: '组织架构树',root: {text: '公司总部',{ text: '研发部', leaf: true },{ text: '人事部', leaf: true },text: '市场部',{ text: '华东区', leaf: true },{ text: '华南区', leaf: true }});代码逻辑逐行解读:行号。 阅读详情

相关推荐

根据输入的关键字过滤ext树节点

根据输入的关键字过滤ext树节点(类似myeclipse中preferences中上的搜索框),可输入节点首字母或中文进行过滤

[Extjs6]treepanel内数据的过滤实现

//菜单树过滤 searchTextChanged:function(node,newValue){ //console.log("searchTextChanged"); //console.log(this.lookupReference('treelist')); alert('searchTextChanged'); v

u010989191的博客 2402

EXT TreeFilter 插件

EXT TreeFilter 插件 提供ext的tree 快速搜索功能 超简单好用~ 支持拼音首字母和中文模糊查询

Extjs TreeFilter 根据关键字过滤树

jQuery MiniUI 开发教程 树形控件 树操作:过滤树(十一) 过滤树                                参考示:过滤树                             filter节点过滤             tree.filter(function (node) {     var text = node.text ? no...

904

TreeFitter-开源

基于简约的树木拟合的软件,可用于分析历史生物地理学,共同进​​化以及物种树中的问题-基因树拟合。

AUTOSAR网络管理配置详解:Vector DaVinci工具全面讲解

手把手带你用Vector DaVinci完成AUTOSAR网络管理模块的配置,涵盖NmChannel、NmPdu、重复帧抑制等关键参数设置,深入解析CAN总线上的NM报文调度与唤醒机制,助你扎实掌握AUTOSAR网络管理核心实践。

weixin_42504649的博客 168

extjs实现全局搜索节点方法

前言:在任何一个Tree树中,提供查找功能无疑会大大方便用户。不用睁大眼睛一级一级去展开,只要输入关键字,回车就能自动定位到节点,岂不快哉?这样的用户体验是相当完美的。但在动态异步加载 的Tree树中,客户端实现这样的功能就有点困难,因为节点是异步动态加载的。默认是没有全部从服务器端取回 的,通常的做法是默认加载第一级,其他级的节点都是惰性按需加载的,用户点了才会展开。而对于这个没有完全加载的树,

woaihewen11的专栏 2454

3D视觉-激光三角测量法的概述和原理

激光三角法位移测量的原理是,用一束激光以某一角度聚焦在被测物体表面,然后从另一角度对物体表面上的激光光斑进行成像,物体表面激光照射点的位置高度不同,所接受散射或反射光线的角度也不同,用。激光三角测量法是一种通过图像采集系统采集被测物表面漫反射的激光轮廓,进而基于设备已知的相对位置通过算法处理,获得被测物表面的三维轮廓数据,进而还原目标物体三维空间信息的方法。采用激光三角原理和回波分析原理进行非接触位置、位移测量的精密传感器, 广泛应用于位置、位移 、厚度、半径、形状、振动、距离等几何量的工业测量。

qq_20660115的博客 3921

ext tree 过滤

1、使用外部 TreeFilter.js 在项目中引用 Ext.define("Ext.ux.TreeFilter", { extend:"Ext.AbstractPlugin", alias:"plugin.treeFilter", collapseOnClear:true, allowParentFolders:false, ini...

weixin_33965305的博客 201

Windows10系统添加虚拟网卡(Microsoft Loopback Adapter)的方法

1、按下win + R键,在其中输入:hdwwiz,然后 (enter) 2、点击下一步即可 3、其次选择【网络适配器】,然后点击【下一步】。 4、在厂商处选择Microsoft,网络适配器处选择【Microsoft Loopback Adapter】选项 ,点击【下一步】。 5、通过上面几个步骤的设置后,一块虚拟网卡的安装设置就算是完成了。 ...

一个懒鬼的博客 2万+

10、网络安全工具:Bettercap 与 Web 应用测试工具全解析

本文详细解析了网络安全工具Bettercap及其在中间人攻击和无线攻击中的应用,同时介绍了多种Web应用测试工具,如Amass、Cadaver、Dirb等,并探讨了工具的使用场景、流程、注意事项以及未来发展趋势,为网络安全测试提供了全面的指导。

u0v1w2x3的博客 227

Extjs中的树在页面上的简单过滤

Extjs在为我们生成树形结构的同时,也为我们提供了过滤的功能,其主要使用了Ext.tree.TreeFilter类来实现过滤,后台的java代码及css代码请参照《Extjs通过structs2生成树结构》。 js文件,主要是tree.js: Ext.onReady(function(){ var textField = new Ext.form.TextField(...

XinhuaShuDiao的博客 389

最新2026年《网络数据安全风险评估办法》条款解读

大型企业集团IT变革下的零信任安全体系建设方案(55页).pptx。以数据安全为核心的安全立体防御体系解决方案(41页).pptx。让数据安全合规地创造价值(15页 PPT).pptx。大型集团数据安全应急预案(57页).docx。数据安全治理与评估服务业务介绍.pptx。数据安全管理实践(17页).pptx。大数据安全架构设计方案.pptx。大数据安全规划总体方案.pptx。数据库安全综合治理方案.pptx。医疗数据安全建设方案.pptx。数据安全框架规划图.pptx。数据安全治理方案.pptx。

cdfunlove的博客 47

Ext Tree 过滤 树 过滤 代码

05.tree                                              Ext.onReady(function(){     var tree = new Ext.tree.TreePanel({         loader: new Ext.tree.TreeLoader({             dataUrl: '10-01.txt'

fineman2012的专栏 873

闲鱼爬虫实战:模拟手机端破解反爬策略,爬取指定商品搜索数据,爬取闲鱼搜索指定商品(需手机端模拟)o 技术点:抓包分析、cookie与token

技术点作用抓取手机 App 请求,分析 API 结构、Header、参数加密情况requestsPython 中最常用的 HTTP 库,用于发送模拟请求Session 对象自动管理 Cookie,保持会话User-Agent & 设备特征模拟手机型号、系统版本,绕过服务端检测闲鱼部分接口存在签名,需要逆向或复用有效 Token多线程/异步提高爬取效率(需节制,避免封 IP)解析 HTML 或 JSON 数据注意:闲鱼的接口加密程度中等偏上,部分接口存在动态签名(如x-signx-mini-wua。

2201_76125261的博客 712

多模态论文笔记——BLIP

本文详细介绍这几年AIGC火爆的隐藏功臣,多模态模型:BLIP。

haopinglianlian的博客 2454

Extjs-树 Ext.tree.TreePanel

文章源址:http://blog.youkuaiyun.com/itlwc/article/details/7873869 1.简单的树 效果图 代码 [javascript] view plaincopy "text/javascript" defer>       Ext.onReady(function(){     

luckypeng的专栏 1176

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

extjs之treePanel树

一、以下是树的一些常用的类 二、从服务器异步加载只需四步 (1)、编写树加载器 var treeLoader = new Ext.tree.TreeLoader({ dataUrl:'servlet/TreeJson' });(2)、指定根节点 var rootNode = new Ext.tree.AsyncTreeNode({ text:'root'

Code changes the world! 1225

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

ExtJs之结构树 Ext.tree.panel详细用法

1.简单的树 效果图 代码 [javascript] view plain copy print? "text/javascript" defer>      Ext.onReady(function(){          Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';    

idomyway的博客 1万+

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

ext中过滤TreeNode的解决方法

  以下是实现代码:   var matched = [];  var treeFilter = new Ext.tree.TreeFilter(this.agencyTree, {                clearBlank : true,                autoClear : true        });   function search() {      ...

duyouhua1214 251

Ext Tree 各种属性

Ext Tree 各种属性

qq_43746783的博客 1766

如何给Ext.tree.ColumnTree添加搜索栏

<br />如何给Ext.tree.ColumnTree添加搜索栏?<br />  我做了一个列树,当列树记录很多时,我希望通过一个搜索栏输入某条列树记录名称,过滤后,列表只有该条记录。请各路大侠不吝赐教!<br />还需要威望.注册了也不会马上有威望吧.<br />楼主这样吊胃口,就不太厚道了,发到免费的网盘里去啊.<br />我没有用网盘,我提供那个网站的帐号和密码吧,威望都很充足<br />对不起,您的 IP 地址不在被允许的范围内,或您的账号被禁用,无法访问本论坛。<br />网站使用的是一个固定模

mdb1110的专栏 590

Ext.Tree 各种属性

1、Ext.tree.TreePanel 主要配置项: root:树的根节点。 rootVisible:是否显示根节点,默认为true。 useArrows:是否在树中使用Vista样式箭头,默认为false。 lines:是否显示树线,默认为true。 loader:树节点的加载器,默认为Ext.tree.TreeLoader。 selModel:树的选择模式,默认为Ext.t

chenlaoyang的专栏 5281

Ext Tree学习小结

这两天用Ext做了个树,期间碰到不少问题

u012844628的专栏 625

为EXT tree 树菜单添加右键菜单时出现重复菜单问题

今天在做项目的时候用到树菜单。因为项目是用EXT 做的前端。而今天在为一个树菜单添加右键菜单的时候,发现连续点击后出现重复菜单选项 如图: 第一次点击,菜单正常:   第二次点击:出现两次添加网点的菜单。 纠结了一上午。才发现每次点击之后没有销毁菜单。所以每次进行点击之后在原先的基础上再添加了一次! 看代码: var root=new Ext.tree.AsyncTree

sw245711601的专栏 970
上一篇: ExtJs combobox 自定义过滤-模糊过滤
下一篇: 一个笔试题目-考实例化先后顺序
w_pingfan
博客等级 码龄21年 0粉丝 10原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值