`
gtgt1988
  • 浏览: 111521 次
  • 性别: 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;  
	          };  

});

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics