`
duyouhua1214
  • 浏览: 236238 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ext中过滤TreeNode的解决方法

 
阅读更多

  以下是实现代码:

 

var matched = [];


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

  function search() {
        var text = seachField.getValue();//seachField为TextField输入框对象
        treeFilter.clear();//treeFilter过滤条件
        matched = [];//匹配的节点
        // 如果输入的数据不存在,就执行clear()
        if (!text) {
            return;
        }
        tree.expandAll();
        // 根据输入制作一个正则表达式,'i'代表不区分大小写
        var re = new RegExp(Ext.escapeRe(text), 'i');
        // 找出所有匹配的结点

        tree.root.cascade(function(n) {
                    if (re.test(n.attributes['text'])) {
                        matched.push(n);
                    }
                }, this);
        // 从每个叶子结点向根方向处理,处理所有结点的枝叶,
        // 如果该枝叶包含匹配的结点,则保留,否则裁剪掉(隐藏)
        tree.root.cascade(function(n) {
            if (n.isLeaf()) {
                // 处理每一条子结点路径
                n.bubble(function(nbb) {
                    // 从叶子到根,逐个剪掉
                    var contain = false;
                    for (var mted = 0; mted < matched.length; mted++) {
                        if (nbb.contains(matched[mted]) || nbb == matched[mted]) {
                            // 包含匹配的结点
                            contain = true;
                            break;
                        }
                    }
                    // 把不包含匹配结点的结点隐藏
                    if (!contain) {
                        nbb.ui.hide();
                        treeFilter.filtered[nbb.id] = nbb;
                    }
                }, this);
            }
        }, this);
    };

分享到:
评论

相关推荐

    根据输入的关键字过滤ext树节点

    可以使用`store.filter()`方法,或者在store配置中设置`autoFilter: true`,然后监听`keyup`事件来实时更新过滤条件。 ```javascript // 监听搜索框的keyup事件 var searchField = Ext.create('Ext.form.field.Text...

    Ext 3.0源码+典型实例

    5. **中文 API**:提供的中文 API 文档是开发者的重要参考资料,它详尽地介绍了 Ext 3.0 中的类、方法、属性和事件。通过查阅 API,开发者可以快速找到对应的函数和配置项,解决在开发过程中遇到的问题。 6. **ext_...

    ExtPanel和其他控件

    在本文中,我们将深入探讨Ext.Net框架中的几个关键控件及其属性,包括ExtPanel、Resizable、GridPanel、TreeNode以及Store和ComboBox。这些控件在构建富客户端Web应用程序时扮演着重要角色。 首先,让我们来看看Ext...

    Ext JS 树

    在Ext JS中,"树"(Tree)是一种数据展示组件,它允许用户以层级结构显示数据。树形结构常用于组织和导航大量的分类信息,例如文件系统、组织架构或者网站导航菜单。 在Ext JS中,树(TreePanel)是用于显示树数据...

    Rails中应用Ext.tree:以中国的省市地区三级联动选择为例

    这篇博客文章“Rails中应用Ext.tree:以中国的省市地区三级联动选择为例”提供了一个实用的示例,教我们如何利用Ext.js库中的Tree组件来实现这种功能。 首先,让我们了解Rails和Ext.js的基本概念。Rails是基于Ruby...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp.net compatibility中的示例。 +2009-08-25 v2.0.7 -为按钮增加...

    EXT树简介.doc

    在这个例子中,`TreeNode`是一个自定义的Java类,代表树的一个节点。`execute`方法将`nodes`列表转换为JSONArray,并将其返回给客户端。 通过以上方式,EXTJS Tree可以与Struts2和json-lib协同工作,实现动态加载和...

    Extjs Tree + JSON + Struts2 例子

    2. 在 `web.xml` 中配置 Struts2 过滤器,确保 Struts2 正确运行。 3. 在 Struts2 动作类中,使用 json-lib 将对象转换为 JSON 数组。例如: ```java import net.sf.json.JSONArray; import ...

    extjs tree

    - **TreeNode**: 树形结构的基本单元,代表树中的一个节点,包含了文本、图标、子节点等信息。 - **TreePanel**: 显示树形数据的容器,它继承自Ext.grid.Panel,并添加了树状布局和特有的功能。 - **Store**: ...

    eXtree js树

    8. **搜索和过滤**:提供搜索和过滤功能,帮助用户快速定位和筛选树中的特定内容。 在实际开发中,eXtree通常与其他JavaScript框架如ExtJS、Sencha Touch一起使用,它们提供了丰富的组件库和强大的布局管理,使得...

    ExtjsTree

    - **TreePanel**:Ext JS中的TreePanel类提供了树形结构的视图,它包含了节点(TreeNode)的管理、拖放操作、节点的展开与折叠等功能。 - **TreeNode**:每个树节点都是一个TreeNode对象,包含数据、子节点以及...

    extjs 树型分页组件

    为了解决这个问题,EXTJS提供了一个名为“树型分页”(Tree Paging)的特性。本文将深入探讨EXTJS树型分页组件的工作原理、实现方法及其实用价值。 1. 树型分页原理 树型分页不同于传统的表格分页,因为它需要处理...

    ExtAspNet_v2.3.2_dll

    +去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp.net compatibility中的示例。 +2009-08-25 v2.0.7 -为按钮增加...

    Extjs教程_第八章_Tree(树)(1)

    在ExtJS中,树形组件通过`Ext.tree.TreePanel`类实现,它能够方便地展示和操作这种层级关系。 2. **配置简单**:使用ExtJS构建树形视图非常便捷,只需要几行代码即可实现。开发者可以通过配置`Ext.tree.TreeLoader`...

    extjs的快速入门教程

    - **Ext类库**: 是ExtJS的基础,提供了一系列工具方法和类,用于简化DOM操作、AJAX请求等。 - **组件**: 是ExtJS的基本构建单元,每个组件都有自己的生命周期和事件处理机制。 - **组件的使用**: 了解如何实例化...

Global site tag (gtag.js) - Google Analytics