转载: http://blog.csdn.net/xiaobai51509660/article/details/36011899
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'
接下来定义一个你自己的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)再以此迭代节点的子节点,匹配节点进行展开并选中。
实现效果图:
-
顶