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

最新推荐文章于 2018-06-14 09:22:00 发布

玉&心

最新推荐文章于 2018-06-14 09:22:00 发布

阅读量276

点赞数

分类专栏： EXTJS 文章标签： extjs

本文链接：https://blog.csdn.net/XinhuaShuDiao/article/details/84714079

版权

EXTJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

效果图如下所示：
[img]http://d.hiphotos.bdimg.com/album/pic/item/6159252dd42a2834672bfc935ab5c9ea14cebf9d.jpg[/img]

玉&心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs中的树在页面上的简单过滤

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

扫一扫