Extjs tree 过滤查询功能
转载: 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'
- /**
- * 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);
- });
- }
实现效果图
Extjs tree 过滤查询功能的更多相关文章
- Extjs treePanel过滤查询功能【转】
Extjs4.2中,对于treeStore中未实现filterBy函数进行实现,treestore并未继承与Ext.data.Store,对于treePanel的过滤查询功能,可有以下两种实现思路: ...
- 在ASP.NET Core中通过EF Core实现一个简单的全局过滤查询
前言 不知道大家是否和我有同样的问题: 一般在数据库的设计阶段,会制定一些默认的规则,其中有一条硬性规定就是一定不要对任何表中的数据执行delete硬删除操作,因为每条数据对我们来说都是有用的,并且是 ...
- 在Winform界面中使用DevExpress的TreeList实现节点过滤查询的两种方式
在我较早的一篇随笔<在DevExpress程序中使用TeeList控件以及节点查询的处理>中,介绍了在树形列表TreeList控件上面,利用SearchControl实现节点的模糊查询过滤 ...
- 【设计过程】.NET ORM FreeSql WhereDynamicFilter 动态表格查询功能
前言 最近几乎每天40度,越热越不想面对电脑,还好开源项目都比较稳定没那么多待解决问题,趁着暑假带着女儿学习游泳已略有小成.游泳好处太多了,建议有孩子的都去学学,我是在岸边指导大约一周左右就学会了,目 ...
- 创建ASP.NET Core MVC应用程序(5)-添加查询功能 & 新字段
创建ASP.NET Core MVC应用程序(5)-添加查询功能 & 新字段 添加查询功能 本文将实现通过Name查询用户信息. 首先更新GetAll方法以启用查询: public async ...
- 完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
- WebService和AngularJS实现模糊过滤查询
WebService和AngularJS实现模糊过滤查询 [概要] 网上看到一个不错的帖子,用WebService获取json,然后在前端使用AngularJs进行过滤搜索,看完文章后,按自己的想 ...
- FreeSql 新查询功能介绍
FreeSql FreeSql 是一个功能强大的 NETStandard 库,用于对象关系映射程序(O/RM),提供了 CodeFirst/DbFirst/CURD/表达式函数/读写分离 等基础封装. ...
- Vc数据库编程基础MySql数据库的表查询功能
Vc数据库编程基础MySql数据库的表查询功能 一丶简介 不管是任何数据库.都会有查询功能.而且是很重要的功能.上一讲知识简单的讲解了表的查询所有. 那么这次我们需要掌握的则是. 1.使用select ...
随机推荐
- EventProxy流程控制
EventProxy流程控制 EventProxy是一个通过控制事件触发顺序来控制业务流程的工具. 1. 利用事件机制解耦复杂业务逻辑2. 移除被广为诟病的深度callback嵌套问题3. 将串行等待 ...
- C#设计模式六大原则——接口隔离
接口隔离定义: 一般有两种定义: 1:客户端不应该依赖他不需要的接口 2:类间的依赖关系应该建立在最小的接口上 我们在建立接口时,应该尽量建立单一,不臃肿庞大的接口,应尽量使接口细化,方法尽量 ...
- 使用DOM创建xml文件
使用DOM创建xml文件 创建xml的代码如下: public class CreateXML { public static void main(String[] args) { DocumentB ...
- PECL: configuration option "php_ini" is not set to php.ini location
message similar to: configuration option "php_ini" is not set to php.ini locationYou shoul ...
- Java Web整合开发王者归来(JSP + Servlet + Struts + Hibernate + Spring) - 读书笔记
第1章 状态码表示响应类型: 保留 表示请求成功地接收 完成请求客户需进一步细化请求 客户错误 服务器错误 Web服务器: Apache服务器,特长是处理静态页面,效率非常高. Tomcat提供对JS ...
- python学习之老男孩python全栈第九期_数据库day004 -- 作业
https://www.cnblogs.com/YD2018/p/9451809.html 11. 查询学过“001”并且也学过编号“002”课程的同学的学号.姓名 select student.si ...
- PHPCMS v9上传图片提示"undefined"的解决办法
把phpcms\modules\attachment\attachments.php中将 if(empty($this->userid)){改成 if(empty($_POST['userid' ...
- JAVA 判断字符串是否可转化为JSONObject、JSONArray
有时,我们需要判断字符串在转化为JSON对象或者JSONArray时,我们可以使用JSONObject.parseObject和JSONArray.parseArray,但是有时候我们需要在转化之前判 ...
- WDCP上传SSL证书
1.在线申请SSL证书 2.网站管理>SSL证书上传 3.将key文件直接上传,cert文件内容复制到crt文件中,再上传 4.开启https 注意:同一个域名下解析的若干域名,只能走主域名的证 ...
- Android开发时,那些相见恨晚的工具或网站!
本文来我在知乎话题Android开发时你遇到过什么相见恨晚的工具或网站?下的回答! 在实际Android开发过程确实会有很多相见恨晚的工具或网站出现,下面是我自己的一些分享. 1.源码网站 https ...