Ext Tree 过滤树过滤代码

来源：互联网发布：mac制作手机铃声编辑：程序博客网时间：2024/05/21 14:41

前言：在任何一个Tree树中，提供查找功能无疑会大大方便用户。不用睁大眼睛一级一级去展开，只要输入关键字，回车就能自动定位到节点，岂不快哉？这样的用户体验是相当完美的。但在动态异步加载的Tree树中，客户端实现这样的功能就有点困难，因为节点是异步动态加载的。默认是没有全部从服务器端取回的，通常的做法是默认加载第一级，其他级的节点都是惰性按需加载的，用户点了才会展开。而对于这个没有完全加载的树，用户希望搜索节点，怎么实现？笨办法是先展开树的所有节点，然后再在树中搜索。这样的话在服务器数据量大的情况下会非常慢。所以在数据量大的情况下，是不采取这种实现方式的，这里的实现方法是在服务器端的Servlet中查找，通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点。

<html>

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>05.tree</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
        <script type="text/javascript" src="localXHR.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){

    var tree = new Ext.tree.TreePanel({
        loader: new Ext.tree.TreeLoader({
            dataUrl: '10-01.txt'
        }),
        root: new Ext.tree.AsyncTreeNode({
            id: '0',
            text: '根'
        }),
        autoHeight: true,
        renderTo: 'tree'
    });

tree.expandAll();

    var filter = new Ext.tree.TreeFilter(tree, {
        clearBlank: true,
        autoClear: true
    });

    // 保存上次隐藏的空节点
    var hiddenPkgs = [];
    var field = Ext.get('filter');

    // 按键后触发事件
    field.on('keyup', function(e) {
        var text = field.dom.value;

        // 先要显示上次隐藏掉的节点
        Ext.each(hiddenPkgs, function(n){
            n.ui.show();
        });

        // 如果输入的数据不存在，就执行clear()
        if(!text){
            filter.clear();
            return;
        }
        tree.expandAll();

        // 根据输入制作一个正则表达式，'i'代表不区分大小写
        var re = new RegExp(Ext.escapeRe(text), 'i');
        filter.filterBy(function(n){
            // 只过滤叶子节点，这样省去枝干被过滤的时候，底下的叶子都无法显示
            return !n.isLeaf() || re.test(n.text);
        });

        // 如果这个节点不是叶子，而且下面没有子节点，就应该隐藏掉
        hiddenPkgs = [];
        tree.root.cascade(function(n) {
            if(!n.isLeaf() && n.ui.ctNode.offsetHeight < 3){
                n.ui.hide();
                hiddenPkgs.push(n);
            }
        });

})

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <input id="filter" type="text" />
        <div id="tree" style="height:300px;"></div>
    </body>
</html>

二、 通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点

要实现此功能需解决三个问题：

1. 通过Ajax将节点id或text传回服务器。

2. 在服务器端查找到节点path，path由节点id号和“/”构成。注意path的格式，如：'/0/4/7'。此处0表示根节点id，7表示被查找的节点id。

3. 将path传回客服端，Extjs将通过Ext.tree.TreePanel 的expandPath 方法展开节点。

在ExtJS中，AsyncTreeNode是异步节点，TreeLoader实现对树结点的异步加载，即使服务器取到大量的数据，也没有问题，异步加载能保证性能和节点的按需加载。服务端需要生成指定格式的Json字符串。

Js代码

var eventTree = new Ext.tree.TreePanel({
region: 'center',
collapsible: false,
title: '导航',
xtype: 'treepanel',
id:'event-west-tree',
width: 180,
animate:false, //展开,收缩动画
autoScroll: true,
enableDD:true,
split: true,
loader: new Ext.tree.TreeLoader({
dataUrl:'ruleGroupTree.do?json=1'
}),
root: new Ext.tree.AsyncTreeNode({
text: '分类规则组',
draggable:false,
//expanded:true, //默认展开第一级
id:'0'
}),
tbar:[{
iconCls: 'icon-expand-all',
tooltip: '展开',
handler: function(){ eventTree.expandAll(); },
scope: this
}, '-', {
iconCls: 'icon-collapse-all',
tooltip: '收缩',
handler: function(){ eventTree.collapseAll(); },
scope: this
}, new Ext.form.TextField({
width: 115,
emptyText:'快速检索',
enableKeyEvents: true,//给输入框绑定keyup事件,需要加上enableKeyEvents:true才能让extjs的textfield代理鼠标事件
listeners:{
keyup:function(node, event) {
findByKeyWordFiler(node, event);
},
scope: this
}
})]
});
eventTree.expandAll();
var filterTreeFiled = new Ext.form.TextField({
width:115,
emptyText:'快速检索',
enableKeyEvents: true
});
var tbar = eventTree.getTopToolbar();
<span style="color: #ff0000;">tbar.add(filterTreeFiled);
tbar.doLayout();</span>
var selectNode = function(node) {
node.ensureVisible();
node.select();
node.fireEvent('click', node);
}
function onExpandPathComplete(bSuccess, oLastNode) {
if (!bSuccess)
return;
// focus 节点，并选中节点！
selectNode(oLastNode);
}
var findByKeyWordPath = function(node, event) {
clearTimeout(timeOutId);
timeOutId = setTimeout(function() {
var text = node.getValue().trim();
// 采用ajax获得需要展开的路径
if (text != "") {
Ext.Ajax.request({
params : {
keyWord : text
},
url : 'ruleGroupTree.do?json=1',
method : 'POST',
async : false,
success : function(response, opts) {
var obj = Ext.decode(response.responseText);
<span style="color: #ff0000;">eventTree.expandPath('/0/101/10101','id',onExpandPathComplete);</span>
eventTree.expandPath('/0/101/10101', 'id', function(bSucess,oLastNode){
eventTree.getSelectionModel().select(oLastNode);
});
if(obj.success){
var length = obj.length;
eventTree.root.reload();
//eventTree.expandAll();
for (var i = 0; i < length; i++) {
var path = obj[i].path;
eventTree.expandPath('/0/101/275','id',onExpandPathComplete);
}
},
failure : function(response, opts) {
Ext.Msg.alert("错误提示", "请求失败,请与开发人员联系。").setIcon(Ext.MessageBox.ERROR);
}
});
} else {
}
}, 500);
}
filterTreeFiled.on("keyup", function(node, event) {
findByKeyWordPath(node, event);
});

以下是具体实现：

1. servlet端要实现的功能就是封装path，将path发送到客服端即可，格式如上。代码省略。

2. 客户端代码：

// 查找树节点
searchNode : function() {
      var searchForm = Ext.getCmp("searchForm").getForm();
      var param = searchForm.getValues();
     if(searchForm.isValid()){
          Ext.Ajax.request({
              url: 'dept!search.action',
               params:{formData:Ext.encode(param)},
               success:function(response){
                   var o = Ext.decode(response.responseText);
                  if(o.success){
                       var tree = Ext.getCmp('sysOrgs');
                      path=o.message;
                      tree.expandPath(path, 'id', this.onExpandPathComplete );
                   }
               },
               failure:function(response){
               },
               scope:this
         });
      }
},
onExpandPathComplete: function(bSuccess, oLastNode) {
  if(!bSuccess)
   return;
  //focus 节点，并选中节点！，以下代码不可少
  oLastNode.ensureVisible();
  oLastNode.select();
  oLastNode.fireEvent('click', oLastNode);

}

关于tree.expandPath方法的使用具体参照API文档。

0 0

Ext Tree 过滤 树 过滤 代码

Ext Tree 过滤树过滤代码