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>
效果图如下所示:
分享到:
相关推荐
ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用
extjs目录树编辑对目录增删改查学习extjs的工具类
extjs下拉树
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json...
extjs 树形下拉列表框,可以进行数据选择,数据回显。
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
extjs实现动态树
ExtJs Filter 实现表格行过滤Demo
ExtJs Grid Filter 实现表格的行过滤
extjs实现动态树加载菜单
详细说明了extjs中的树控件,正确无误的说明extjs树控件的强大之处
extjs增删改查分页树
ExtJS4下拉树组件 ExtJS4下拉树组件
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
extjs 树 搜索extjs 树 搜索vvextjs 树 搜索extjs 树 搜索extjs 树 搜索extjs 树 搜索extjs 树 搜索
Extjs4动态树实现,感觉写的比较好就分享给大家
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...