Extjs中的树在页面上的简单过滤
Extjs在为我们生成树形结构的同时，也为我们提供了过滤的功能，其主要使用了Ext.tree.TreeFilter类来实现过滤，后台的java代码及css代码请参照《Extjs通过structs2生成树结构》。
js文件,主要是tree.js:
Ext.onReady(function(){
var textField = new Ext.form.TextField({
renderTo:'tree1', //加载到界面的位置
height:20,
width:100,
enableKeyEvents: true,
emptyText:'查找军区',
listeners:{
change:function(t,e){filterTree(t,e)}
}
});
var hidPaks = [];//用于存储隐藏的节点
var filterTree = function(t,e){
var text = t.getValue();//获取textField中的输入值
var filter = new Ext.tree.TreeFilter(tree3, {
clearBlank: true,
autoClear: true
});//给树添加过滤的属性
//显示隐藏了的节点
Ext.each(hidPaks,function(n){
n.ui.show();
});
//没有输入值得时候全部显示节点
if(!text){
filter.clear();
return ;
}
//展开所有节点
tree3.expandAll();
//i表示不区分大小写生成一个正则表达式
var re = new RegExp('^' + Ext.escapeRe(text), 'i');
//只过滤叶子节点，避免枝干被过滤的时候，底下的叶子都无法显示
filter.filterBy(function(n){
return !n.isLeaf() || re.test(n.text);
});
hidPaks = [];
tree3.root.cascade(function(n){
// 如果这个节点不是叶子，而且下面没有子节点，就应该隐藏掉
if(!n.isLeaf() && judge(n,re,hidPaks)==false && !re.test(n.text)){
n.ui.hide();
hidPaks.push(n);
}else if(n.isLeaf() && judge(n,re,hidPaks)== true){//为叶子节点切没有隐藏时，显示叶子节点
n.ui.show() ;
}
});
}
//过滤不匹配的非叶子节点或者是叶子节点
var judge =function(n,re,hidPaks){
var str=false;
n.cascade(function(n1){
n1.attributes.hide = true;//给本节点设置为隐藏
if(n1.isLeaf())
{
if(n1.parentNode.attributes.hide == true){//父节点隐藏时判断该节点是否满足条件
if(re.test(n1.text)){
str=true;
return;
}else{
hidPaks.push(n1);//在数组中加入叶子节点信息
}
}else{
str=true;
return;
}
}
else
{
//在父节点不为空切父节点隐藏时
if(n1.parentNode != null && n1.parentNode != '' && n1.parentNode.attributes.hide == true){
if(re.test(n1.text)){//判断该节点是否满足条件
str=true;
n1.attributes.hide = false;//满足条件时隐藏字段设为false
return;
}
}else if(n1.parentNode != null && n1.parentNode != '' && n1.parentNode.attributes.hide == false){
str=true;
n1.attributes.hide = false;//父节点没有隐藏时，本节点也不用隐藏
return;
}
}
});
return str;
};
var tree3 = new Ext.tree.TreePanel({
el:'tree1',
autoScroll:true,
animate:true,
enableDD:true,
autoHeight:true,
autoWidth:true,
containerScroll:true,
loader:new Ext.tree.TreeLoader({dataUrl:'function_testTree.action'})
});
var root3 = new Ext.tree.AsyncTreeNode({
text:'中国军区',
draggable:false,
id:'testTree'
});
tree3.setRootNode(root3);
tree3.render();
tree3.expandAll();//展开所以节点
});
jsp文件：
<html>
<head>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript" src="./js/tree1.js"></script>
<link rel="stylesheet" type="text/css" href="./css/menu.css">
</head>
<body>
<div id="container">
<div id="tree1">
</div>
</div>
</body>
</html>
效果图如下所示：
js文件,主要是tree.js:
Ext.onReady(function(){
var textField = new Ext.form.TextField({
renderTo:'tree1', //加载到界面的位置
height:20,
width:100,
enableKeyEvents: true,
emptyText:'查找军区',
listeners:{
change:function(t,e){filterTree(t,e)}
}
});
var hidPaks = [];//用于存储隐藏的节点
var filterTree = function(t,e){
var text = t.getValue();//获取textField中的输入值
var filter = new Ext.tree.TreeFilter(tree3, {
clearBlank: true,
autoClear: true
});//给树添加过滤的属性
//显示隐藏了的节点
Ext.each(hidPaks,function(n){
n.ui.show();
});
//没有输入值得时候全部显示节点
if(!text){
filter.clear();
return ;
}
//展开所有节点
tree3.expandAll();
//i表示不区分大小写生成一个正则表达式
var re = new RegExp('^' + Ext.escapeRe(text), 'i');
//只过滤叶子节点，避免枝干被过滤的时候，底下的叶子都无法显示
filter.filterBy(function(n){
return !n.isLeaf() || re.test(n.text);
});
hidPaks = [];
tree3.root.cascade(function(n){
// 如果这个节点不是叶子，而且下面没有子节点，就应该隐藏掉
if(!n.isLeaf() && judge(n,re,hidPaks)==false && !re.test(n.text)){
n.ui.hide();
hidPaks.push(n);
}else if(n.isLeaf() && judge(n,re,hidPaks)== true){//为叶子节点切没有隐藏时，显示叶子节点
n.ui.show() ;
}
});
}
//过滤不匹配的非叶子节点或者是叶子节点
var judge =function(n,re,hidPaks){
var str=false;
n.cascade(function(n1){
n1.attributes.hide = true;//给本节点设置为隐藏
if(n1.isLeaf())
{
if(n1.parentNode.attributes.hide == true){//父节点隐藏时判断该节点是否满足条件
if(re.test(n1.text)){
str=true;
return;
}else{
hidPaks.push(n1);//在数组中加入叶子节点信息
}
}else{
str=true;
return;
}
}
else
{
//在父节点不为空切父节点隐藏时
if(n1.parentNode != null && n1.parentNode != '' && n1.parentNode.attributes.hide == true){
if(re.test(n1.text)){//判断该节点是否满足条件
str=true;
n1.attributes.hide = false;//满足条件时隐藏字段设为false
return;
}
}else if(n1.parentNode != null && n1.parentNode != '' && n1.parentNode.attributes.hide == false){
str=true;
n1.attributes.hide = false;//父节点没有隐藏时，本节点也不用隐藏
return;
}
}
});
return str;
};
var tree3 = new Ext.tree.TreePanel({
el:'tree1',
autoScroll:true,
animate:true,
enableDD:true,
autoHeight:true,
autoWidth:true,
containerScroll:true,
loader:new Ext.tree.TreeLoader({dataUrl:'function_testTree.action'})
});
var root3 = new Ext.tree.AsyncTreeNode({
text:'中国军区',
draggable:false,
id:'testTree'
});
tree3.setRootNode(root3);
tree3.render();
tree3.expandAll();//展开所以节点
});
jsp文件：
<html>
<head>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript" src="./js/tree1.js"></script>
<link rel="stylesheet" type="text/css" href="./css/menu.css">
</head>
<body>
<div id="container">
<div id="tree1">
</div>
</div>
</body>
</html>
效果图如下所示：