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

357029540

浏览: 736997 次
性别:
来自: 重庆

最近访客更多访客>>

韩毅Evan

heroqt

jis117

divver

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

EXTJS

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>

效果图如下所示：