Ext tree 树的过滤

本文介绍了一种在树形结构中使用关键字进行节点筛选的方法。通过遍历树节点并使用正则表达式来查找匹配关键字的节点,再进一步判断是否保留整个分支。此方法适用于动态过滤大量树状数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

根据关键字查询树中任意匹配的结点,
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);
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值