`
hengrg
  • 浏览: 4075 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Ext Tree 过滤

阅读更多
subjectTree = new Ext.tree.TreePanel({
renderTo: subComboxTreeID,
loader: new Ext.tree.TreeLoader({dataUrl:"TBM/getSubjectByRespCenterNode.action",baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI}}),
border: false,
rootVisible:true,
    autoScroll:true,
    checkModel: 'cascade',   //对树的级联多选 
        onlyLeafCheckable: false,//对树所有结点都可选 
root:new Ext.tree.TreeNode({text: '请选择',id:'0'}),
listeners :{"click":
function(node,e){
                if(node.id == 0){
                return false;
                }
               var temp_Record1 = Ext.data.Record.create([
{name:"id"  ,type:'string'}
   ,{name:"name",type:'string'}
]);
                var tmprd1 = new temp_Record1({
id:node.attributes.id,
name:node.attributes.text
});
var_subjectds.insert(0,tmprd1);
                rdd.set("subjectCode",node.id);
                subCom.setValue(node.attributes.id);
                Ext.get(subCom.getId()).dom.value = node.attributes.text;
                subCom.setRawValue(node.attributes.text);
subCom.collapse();
rdd.commit();
}
},
tbar:[new Ext.form.TextField({ width: 200,
    emptyText:'请输入过滤条件...',
    listeners:{
     render: function(f){
      f.el.on('keydown', filterBy, f, {buffer: 350});
     }
    }
})]

});
var hiddenPkgs = [];
function filterBy(e){
for(var i=0;i<hiddenPkgs.length;i++){
hiddenPkgs[i].ui.show();
}
var matched = [];
var text = e.target.value;
                    this.treeFilter = new Ext.tree.TreeFilter(subjectTree, {  
                    clearBlank: true,  
                    autoClear: true 
                }); 
                    //如果输入的数据不存在,就执行clear()  
                    if(!text){  
                        return;  
                    }  
                    subjectTree.expandAll();  
                    //根据输入制作一个正则表达式,'i'代表不区分大小写  
                    var re = new RegExp(Ext.escapeRe(text), 'i');  
                    //找出所有匹配的结点  
                    subjectTree.root.cascade(function(n) {  
                        if(re.test(n.attributes.text)){  
                            matched.push(n);  
                        }  
                    },this);  
                    //从每个叶子结点向根方向处理,处理所有结点的枝叶,  
                    //如果该枝叶包含匹配的结点,则保留,否则裁剪掉(隐藏)   
                    subjectTree.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();
                                    hiddenPkgs.push(nbb);
                                    this.treeFilter.filtered[nbb.id]=nbb;
                                }  
                            },this); 
                       // }  
                     },this);
}
分享到:
评论

相关推荐

    EXT TreeFilter 插件

    EXT TreeFilter插件是EXT库中的一个强大工具,主要用于增强EXT的Tree组件的功能,特别是针对树形结构数据的快速搜索和过滤。EXT Tree是EXT框架中用于展示层次结构数据的组件,它通常用于构建具有多级目录结构的应用...

    ext TreeFilter ext 写的快速检索

    TreeFilter是EXT Tree的一个扩展功能,它的主要任务是在树结构中进行实时过滤。当用户在搜索框中输入字符时,TreeFilter会自动遍历树的每一层,找到与输入字符匹配的节点,并隐藏不匹配的节点,从而快速呈现匹配结果...

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

    本篇文章将深入探讨如何根据输入的关键字过滤Ext树节点,类似于MyEclipse中的preferences搜索框功能。 首先,理解“树节点过滤”(Tree Node Filtering)的概念。在ExtJS的树视图中,过滤功能允许用户通过输入...

    Ext tree build

    标题“Ext tree build”指的是在Ext JS框架中构建树形结构的过程。Ext JS是一个流行的JavaScript库,用于构建富客户端Web应用程序。它提供了丰富的组件库,其中包括用于显示层次数据的树形控件(Tree)。在本篇文章...

    ext.net 中树加载及实现方式,初学者可以参考

    在EXT.NET框架中,树形控件(Tree)是一种常用的数据展示组件,它允许用户以层级结构展示数据。本文将详细介绍EXT.NET中的树加载及其实现方式,这对于初学者来说是一份很好的参考资料。 首先,EXT.NET中的树形控件...

    ext 资源汇总

    这个"EXT 资源汇总"包含了一系列与EXT相关的组件,如表单(Ext.form)、网格(Ext.grid)和树形视图(tree)。这些组件是EXT的核心功能,允许开发者创建交互式的用户界面。 1. **EXT.form**: EXT.form模块提供了...

    extjs tree

    - **TreePanel**: 显示树形数据的容器,它继承自Ext.grid.Panel,并添加了树状布局和特有的功能。 - **Store**: 负责管理树的数据,可以是JSON或XML格式,包含节点的所有信息。 - **Model**: 定义树节点的数据...

    ext培训文档doc

    7. **EXT Tree**:EXT的树形视图组件适用于层次结构数据的展示,可以进行展开、折叠、拖放操作,常用于导航菜单或文件系统。 8. **EXT Theme**:EXT提供了多种主题样式,可以自定义皮肤,满足不同设计需求。同时,...

    ext treegrid

    Ext TreeGrid是一款在Ext JS框架下开发的组件,它结合了Tree和Grid的优点,提供了一种既能展示层次结构数据又能进行表格样式的显示和操作的视图。在Ext JS库中,Tree通常用于展现层级关系的数据,而Grid则用于显示二...

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

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

    ext树实例代码

    从给定的文件信息中,我们可以深入探讨“ext树实例代码”这一主题,了解如何在Ext JS中详细应用tree控件。 ### 标题:ext树实例代码 #### 描述:ext中,tree控件的详细应用,实例。 ### 知识点解析: **1. Ext ...

    extjs tree 异步加载树型

    可以通过配置 TreeStore 的 `remoteSort` 和 `remoteFilter` 属性来实现远程排序和过滤。 9. **Error Handling**:处理 AJAX 请求失败的情况,可以监听 `exception` 事件,提供错误提示或者重试机制。 10. **...

    Ext 开发指南 学习资料

    3.10. 树形过滤器TreeFilter 3.11. TreeSorter对树形排序 4. 祝福吧!把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 ...

    Extjs Tree + JSON + Struts2 例子

    var tree = new Ext.tree.TreePanel({ url: 'treeAction.action', loader: new Ext.tree.TreeLoader({ dataUrl: 'treeAction.action', jsonData: true // 告诉 TreeLoader 使用 JSON 解析数据 }), root: { ...

    Ext用户扩展控件-----树形表格

    在ExtJS中,Tree Grid的实现通常基于`Ext.tree.Panel`和`Ext.grid.Panel`。开发者可以使用`Ext.tree.Column`来定义列,就像在普通的`Ext.grid.Panel`中一样。同时,还需要配置`store`来管理数据,这个store不仅需要...

    EXT_JS实例,官方实例

    5. **EXT JS Tree**:Tree组件提供了树形结构的数据展示,适用于层级关系的管理,如文件系统或组织结构。它可以包含复选框、图标和其他自定义节点。 6. **表单组件**:EXT JS提供了一系列表单组件,如文本框...

    ext自定义树组件

    在EXT中,树组件(Tree Component)是一种常见的UI元素,用于展示层级结构的数据,如文件系统、组织结构或任何具有层次关系的信息。 自定义EXT树组件涉及到多个知识点,包括但不限于以下几点: 1. **组件创建**:...

    Ext组件描述,各个组件含义

    **2.12 Tree Panel (Ext.tree.TreePanel)** - **xtype**: `treepanel` - **功能描述**:Tree Panel 是一个树形结构的组件,可以用来展示层次结构的数据。 - **主要用途**:适用于展示目录结构或组织架构图。 **...

    Ext 3.0 中文文档.zip

    Ext 3.0的Tree支持拖放操作、节点展开/折叠以及异步加载。通过配置,开发者可以定制节点的图标、文本和行为,也可以添加右键菜单和搜索功能。 这份"Ext 3.0中文文档.CHM"包含了上述所有主题的详细解释和示例代码,...

    ext 3.0 中文API

    4. **Tree**:EXT的树形组件用于展示层次结构的数据,支持动态加载、拖放操作和节点的展开/折叠。 5. **Tab Panel**:通过Tab Panel,可以创建带有多个标签页的应用界面,每个标签页可以包含不同的组件或面板。 6....

Global site tag (gtag.js) - Google Analytics