Extjs treePanel过滤查询功能
来源:互联网 发布:js冒泡排序 从小到大 编辑:程序博客网 时间:2024/05/01 04:19
Extjs4.2中,对于treeStore中未实现filterBy函数进行实现,treestore并未继承与Ext.data.Store,对于treePanel的过滤查询功能,可有以下两种实现思路:
一:FilterBy函数
实现思路:
1)对于treestore 结构类型,extjs提供了专门的迭代函数cascadeBy函数,用于对树型节点进行迭代
2)迭代树型结构,在回调函数中,判断是否存在所查询内容,如果存在,将节点的id数组里。
3)再次迭代树型结构,将不在数据里的节点进行隐藏。
4)每次查询过程中,将所有节点设置可见。
注:在extjs中,对于界面元素的操作,可利用Ext.dom.Element对界面元素dom进行显示操作。
首先定义一个类'MyExtend.lib.TreeFilter'
/** * Created by bcm on 14-6-30. */Ext.define('Juliet.util.TreeFilter', { filterByText: function(text) { this.filterBy(text, 'text'); }, /** * 根据字符串过滤所有的节点,将不符合条件的节点进行隐藏. * @param 查询字符串. * @param 要查询的列. */ filterBy: function(text, by) { debugger; this.clearFilter(); var view = this.getView(), me = this, nodesAndParents = []; // 找到匹配的节点并展开. // 添加匹配的节点和他们的父节点到nodesAndParents数组. this.getRootNode().cascadeBy(function(tree, view) { var currNode = this; if (currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) { me.expandPath(currNode.getPath()); while (currNode.parentNode) { nodesAndParents.push(currNode.id); currNode = currNode.parentNode; } } }, null, [me, view]); // 将不在nodesAndParents数组中的节点隐藏 this.getRootNode().cascadeBy(function(tree, view) { var uiNode = view.getNodeByRecord(this); if (uiNode && !Ext.Array.contains(nodesAndParents, this.id)) { Ext.get(uiNode).setDisplayed('none'); } }, null, [me, view]); }, clearFilter: function() { var view = this.getView(); this.getRootNode().cascadeBy(function(tree, view) { var uiNode = view.getNodeByRecord(this); if (uiNode) { Ext.get(uiNode).setDisplayed('table-row'); } }, null, [this, view]); }});
接下来定义一个你自己的treepanel,并混入这个类
1
2
3
4
5
Ext.define(
'MyTreePanel'
,{
extend:
'Ext.tree.Panel'
,
mixins:[
'MyExtend.lib.TreeFilter'
]
});
调用方法:treepanel.filterByText('xxx') 或treepanel.filterBy('xxx','列名') 进行过滤查询
实现结果图:
二:searchTables函数
实现思路:
1)循环迭代树型结构,利用正则表达式进行匹配,对于匹配的节点进行展开并选中。
2)再以此迭代节点的子节点,匹配节点进行展开并选中。
// treepanel 模糊查询 ,展开树型结构,选中匹配项function searchTables(tree,value){ tree.forEach(function(e){ var content = e.raw.text; var re = new RegExp(Ext.escapeRe(value), 'i'); if(re.test(content)||re.test(content.toUpperCase())){ e.parentNode.expand(); var tabllepanel=Ext.ComponentQuery.query('auditruleview treepanel[name=dataTables]')[0]; var selModel = tabllepanel.getSelectionModel(); selModel.select(e,true); if(!e.isLeaf()){ e.expand(); } } searchTables(e.childNodes,value); });}
实现效果图:
0 0
- Extjs treePanel过滤查询功能
- Extjs tree 过滤查询功能
- extjs treepanel
- extjs treepanel的ctrl、shift多选、连选功能实现
- ExtJS专题-TreePanel(1)
- ExtJS专题-TreePanel(1)
- ExtJS专题-TreePanel(2)
- ExtJS专题-TreePanel(1)
- ExtJs之TreePanel篇
- Extjs的TreePanel
- ExtJs——TreePanel!!!
- Extjs TreePanel 完美实现
- EXTJS 专题 TreePanel
- extjs 异步treepanel创建
- ExtJS专题-TreePanel
- ExtJS学习之TreePanel
- ExtJS专题-TreePanel(1)
- extjs之treePanel树
- 在eclipse中调试jdk源码
- 素数
- 程序员生存定律--如何尽快变的稍微专业一点
- 刷新
- 指针数组和数组指针
- Extjs treePanel过滤查询功能
- 空间八叉树剖分
- PHP登录环节防止sql注入实例详解
- 外部内部变量 作用域
- mac's native Terminal VS iterm2
- 使用HTML5的十大原因
- 一个老程序员对学弟学妹的一些忠告
- validate.js的使用
- UP-CUP6410开发板烧写遇到的问题和解决方法