`
gtgt1988
  • 浏览: 114252 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

实现extjs combox下拉树的模糊查询

 
阅读更多
<script type="text/javascript" src="/resources/js/combox/ComboBoxCheckTree.js"></script>
<script type="text/javascript" src="/resources/js/subQuery/TreeUI.js"></script>


主要是用到
ComboBoxCheckTree和TreeUI两个控件  模糊查询关键是使用
comboBoxCheckTree.on('beforequery',function(e){
		     var combo = e.combo;
	         if (!e.forceAll) {
	        	 var  value=e.query;
	        	 findByKeyWordFiler(value);
	         }
	        	});
重写下拉框的beforequery事件.赋值操作发现个问题ComboBoxCheckTree源码中有个
this.tree.on('check', function(node, checked) {
    combox.setValue();
   }); 起赋值作用的,但是有些选中的节点,并没有赋值,取消选中却赋值了,不知道为什么,
于是修改了
this.tree.on('checkchange', function(node, checked) {
    combox.setValue();
   });改为'checkchange'事件,就解决了该问题.


源码如下
Ext.onReady(function() {
	Ext.QuickTips.init();

	var contenttree = new Ext.tree.TreePanel({ 
		 checkModel: 'cascade',    //对树的级联多选
		  onlyLeafCheckable: false,//对树所有结点都可选
		  rootVisible:false, 
		   autoScroll:false,
		   autoHeight:true,
		    loader: new Ext.tree.TreeLoader({
		        	dataUrl:'/neFunction/test',
		        	baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }
		        }),     
		        root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'})    
		});
	
		var comboBoxCheckTree = new Ext.ux.ComboBoxCheckTree({
			renderTo : 'comboBoxCheckTree',
			width : 300,
			height : 150,
			tree:contenttree,
			selectValueModel:'leaf'
			
		});

		comboBoxCheckTree.on('beforequery',function(e){
		     var combo = e.combo;
	         if (!e.forceAll) {
	        	 var  value=e.query;
	        	 findByKeyWordFiler(value);
	         }
	        	});
		
		

		 var timeOutId = null;  
	 
	          var treeFilter = new Ext.tree.TreeFilter(comboBoxCheckTree.tree, {  
		           clearBlank : true,  
	               autoClear : true  
	          });  
	 
	         // 保存上次隐藏的空节点  
	           var hiddenPkgs = [];  
	            var findByKeyWordFiler = function(node) {  
	               clearTimeout(timeOutId);// 清除timeOutId  
	               comboBoxCheckTree.tree.expandAll();// 展开树节点  
	              // 为了避免重复的访问后台,给服务器造成的压力,采用timeOutId进行控制,如果采用treeFilter也可以造成重复的keyup  
	               timeOutId = setTimeout(function() {  
	                   // 获取输入框的值  
	                   var text = node;  
	                 // 根据输入制作一个正则表达式,'i'代表不区分大小写  
	                  var re = new RegExp(Ext.escapeRe(text), 'i');  
	                 // 先要显示上次隐藏掉的节点  
		                   Ext.each(hiddenPkgs, function(n) {  
	                       n.ui.show();  
	                  });  
	                  hiddenPkgs = [];  
	                 if (text != "") {  
	                      treeFilter.filterBy(function(n) {  
		                           // 只过滤叶子节点,这样省去枝干被过滤的时候,底下的叶子都无法显示  
	                           return !n.isLeaf() || re.test(n.text);  
	                      });  
	                       // 如果这个节点不是叶子,而且下面没有子节点,就应该隐藏掉  
	                      comboBoxCheckTree.tree.root.cascade(function(n) {  
	                           if(n.id!='0'){  
	                                if(!n.isLeaf() &&judge(n,re)==false&& !re.test(n.text)){  
	                                   hiddenPkgs.push(n);  
	                                 n.ui.hide();  
	                              }  
	                           }  
	                       });  
	                  } else {  
	                       treeFilter.clear();  
	                       return;  
		                   }  
		                }, 500);  
	           }; 
	          // 过滤不匹配的非叶子节点或者是叶子节点  
	           var judge =function(n,re){  
	               var str=false;  
	               n.cascade(function(n1){  
		                   if(n1.isLeaf()){  
	                       if(re.test(n1.text)){ str=true;return; }  
	                    } else {  
	                       if(re.test(n1.text)){ str=true;return; }  
		                  }  
		              });  
	               return str;  
	          };  

});

 

分享到:
评论

相关推荐

    combox下拉树combox下拉树

    实现Combox下拉树的关键在于数据结构的设计和UI组件的交互。数据结构通常包含父节点和子节点信息,以便在界面上形成层次结构。同时,要处理好展开、折叠、选择事件,确保用户体验流畅。 在实际应用中,Combox下拉树...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    ExtJs4.2下拉树(修改版)

    ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...

    ExtJs3下拉树

    ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时...在EXTJS4中,这个控件是实现复杂下拉选择功能的利器。

    Extjs6中Combobox实现下拉多选

    该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

    Extjs6中利用treePicker实现的下拉树中

    利用extjs6自带的treePicker插件,实现下拉树的效果

    Extjs下拉多选树

    在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...

    ExtJs下拉树

    在ExtJS中,下拉树(ComboBoxTree)是一种结合了下拉框和树结构的组件,它允许用户从一个展开的树形列表中选择值,而不是传统的单行文本输入或简单的下拉列表。这种组件在数据层级结构复杂且需要用户进行多级选择时...

    Extjs4 下拉树( v1.0版本有bug,已经上传一个可以用的)

    标题中的“Extjs4 下拉树”指的是EXTJS框架中的一个组件,用于实现下拉菜单与树形结构的结合,这种组件通常在需要选择层级结构数据时非常有用,比如地区选择、组织架构选择等。EXTJS是Sencha公司开发的一个...

    extjs下拉树

    在ExtJS中,下拉树是通过`Ext.form.field.Tree`类实现的,它继承自`Ext.form.field.ComboBox`,增加了树状结构的功能。`ComboTree.js`可能就是实现了这个功能的JavaScript文件,包含了一些定制化的代码或扩展。 ...

    ExtJS4下拉树组件

    ### ExtJS4 下拉树组件知识点详解 #### 一、概述 在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于...

    extjs4 实现下拉树并支持复选

    在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...

    ExtJS3 实现异步下拉树

    在ExtJS 3中,实现异步下拉树涉及到几个关键概念和技术。 首先,理解“异步”意味着数据不是一次性加载完毕,而是按需加载。在下拉树中,当用户展开树节点时,只加载该节点及其子节点的数据,这减少了初始页面加载...

    Extjs实现下拉菜单效果

    在本篇文章中,我们将详细了解如何使用ExtJS框架实现具有下拉树功能的下拉菜单效果。ExtJS是一个成熟的JavaScript框架,用于创建交互式的Web应用程序,提供了一整套丰富的用户界面组件,其下拉树组件是其众多组件之...

    Extjs自定义组件-下拉树

    ### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...

    Extjs ComboBoxTree 下拉树组件

    文件"ComboBoxTree"可能是实现这一组件的源代码或者配置文件,包含了实现下拉树组件的JavaScript代码和相关的配置信息。如果需要深入了解或修改这个组件,你需要查看这个文件的内容,理解其中的数据结构、事件处理和...

    Extjs4 多选下拉树

    在ExtJS4中,多选下拉树(Multi Select Tree)是一种用户界面组件,它结合了下拉菜单和树形结构,允许用户从层级结构中选择多个项目。这个组件在数据管理、分类选择等场景中非常实用。 在实现多选下拉树时,我们...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    本教程将深入讲解如何实现EXTJS4下的下拉菜单树,并支持单选和多选功能。 1. **EXTJS4的基础概念** - EXTJS是一个基于JavaScript的富客户端框架,提供了一系列强大的组件库,可以构建复杂的、数据驱动的Web应用...

Global site tag (gtag.js) - Google Analytics