根据关键字查询树中任意匹配的结点,
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树节点(类似myeclipse中preferences中上的搜索框),可输入节点首字母或中文进行过滤
EXT TreeFilter 插件 提供ext的tree 快速搜索功能 超简单好用~ 支持拼音首字母和中文模糊查询
输入拼音首字母或者汉字都可以对树结点进行过滤 过滤仅对子节点有效 快速检索
3.10. 树形过滤器TreeFilter 3.11. TreeSorter对树形排序 4. 祝福吧!把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 ...
7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
一个基于EXT实现的树,先上图。 动态加载加右键菜单。 希望拿到可以跑起来看看效果的,需要按以下步骤做。 1 安装oracle,这个例子只做了oracle版本,如果需要,后期可以加上mysql版本,呵呵。 2 运行建用户及表...
10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...
10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...
-重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...
-重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...
Ext JS-> React示例 这些代码示例支持上的Ext JS to React博客文章。 以下是本系列所涵盖主题的概述...使用React (代码) 加载,排序和过滤数据 使用Redux处理数据(代码) 使用MobX处理数据(代码) 图表(代码)
3.56 tree指令:以树状图显示目录内容 3.57 umount指令:卸除文件系统 第4天 网络通信指令 4.1 apachectl指令:apache HTTP服务器控制接口 4.2 arp指令:地址转换协议 4.3 arping指令:ARP请求报文 4.4 arpwatch指令...