扩展jquery easyui tree的搜索树节点方法(推荐)


Posted in Javascript onOctober 28, 2016

如下所示:

/**
 * 1)扩展jquery easyui tree的节点检索方法。使用方法如下:
 * $("#treeId").tree("search", searchText);	 
 * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本。
 * 如果searchText为空或"",将恢复展示所有节点为正常状态
 */
(function($) {	
	
	$.extend($.fn.tree.methods, {
		/**
		 * 扩展easyui tree的搜索方法
		 * @param tree easyui tree的根DOM节点(UL节点)的jQuery对象
		 * @param searchText 检索的文本
		 * @param this-context easyui tree的tree对象
		 */
		search: function(jqTree, searchText) {
			//easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
			var tree = this;
			
			//获取所有的树节点
			var nodeList = getAllNodes(jqTree, tree);
			
	 		//如果没有搜索条件,则展示所有树节点
			searchText = $.trim(searchText);
	 		if (searchText == "") {
	 			for (var i=0; i<nodeList.length; i++) {
	 				$(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
	 	 			$(nodeList[i].target).show();
	 	 		}
	 			//展开已选择的节点(如果之前选择了)
	 			var selectedNode = tree.getSelected(jqTree);
	 			if (selectedNode) {
	 				tree.expandTo(jqTree, selectedNode.target);
	 			}
	 			return;
	 		}
	 		
	 		//搜索匹配的节点并高亮显示
	 		var matchedNodeList = [];
	 		if (nodeList && nodeList.length>0) {
	 			var node = null;
	 			for (var i=0; i<nodeList.length; i++) {
	 				node = nodeList[i];
	 				if (isMatch(searchText, node.text)) {
	 					matchedNodeList.push(node);
	 				}
	 			}
	 			
	 			//隐藏所有节点
	 	 		for (var i=0; i<nodeList.length; i++) {
	 	 			$(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
	 	 			$(nodeList[i].target).hide();
	 	 		} 			
	 			
	 			//折叠所有节点
	 	 		tree.collapseAll(jqTree);
	 			
	 			//展示所有匹配的节点以及父节点 			
	 			for (var i=0; i<matchedNodeList.length; i++) {
	 				showMatchedNode(jqTree, tree, matchedNodeList[i]);
	 			}
	 		} 	 
		},
		
		/**
		 * 展示节点的子节点(子节点有可能在搜索的过程中被隐藏了)
		 * @param node easyui tree节点
		 */
		showChildren: function(jqTree, node) {
			//easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
			var tree = this;
			
			//展示子节点
			if (!tree.isLeaf(jqTree, node.target)) {
				var children = tree.getChildren(jqTree, node.target);
				if (children && children.length>0) {
					for (var i=0; i<children.length; i++) {
						if ($(children[i].target).is(":hidden")) {
							$(children[i].target).show();
						}
					}
				}
			} 	
		},
		
		/**
		 * 将滚动条滚动到指定的节点位置,使该节点可见(如果有滚动条才滚动,没有滚动条就不滚动)
		 * @param param {
		 * 	 treeContainer: easyui tree的容器(即存在滚动条的树容器)。如果为null,则取easyui tree的根UL节点的父节点。
		 *  targetNode: 将要滚动到的easyui tree节点。如果targetNode为空,则默认滚动到当前已选中的节点,如果没有选中的节点,则不滚动
		 * } 
		 */
		scrollTo: function(jqTree, param) {
			//easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
			var tree = this;
			
			//如果node为空,则获取当前选中的node
			var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);
			
			if (targetNode != null) {
				//判断节点是否在可视区域				
				var root = tree.getRoot(jqTree);
				var $targetNode = $(targetNode.target);
				var container = param && param.treeContainer ? param.treeContainer : jqTree.parent();
				var containerH = container.height();
				var nodeOffsetHeight = $targetNode.offset().top - container.offset().top;
				if (nodeOffsetHeight > (containerH - 30)) {
					var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30;
					container.scrollTop(scrollHeight);
				}							
			}
		}
	});
	
	
	
	
	/**
	 * 展示搜索匹配的节点
	 */
	function showMatchedNode(jqTree, tree, node) {
 		//展示所有父节点
 		$(node.target).show();
 		$(".tree-title", node.target).addClass("tree-node-targeted");
 		var pNode = node;
 		while ((pNode = tree.getParent(jqTree, pNode.target))) {
 			$(pNode.target).show(); 			
 		}
 		//展开到该节点
 		tree.expandTo(jqTree, node.target);
 		//如果是非叶子节点,需折叠该节点的所有子节点
 		if (!tree.isLeaf(jqTree, node.target)) {
 			tree.collapse(jqTree, node.target);
 		}
 	} 	 
	
	/**
	 * 判断searchText是否与targetText匹配
	 * @param searchText 检索的文本
	 * @param targetText 目标文本
	 * @return true-检索的文本与目标文本匹配;否则为false.
	 */
	function isMatch(searchText, targetText) {
 		return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1;
 	}
	
	/**
	 * 获取easyui tree的所有node节点
	 */
	function getAllNodes(jqTree, tree) {
		var allNodeList = jqTree.data("allNodeList");
		if (!allNodeList) {
			var roots = tree.getRoots(jqTree);
 			allNodeList = getChildNodeList(jqTree, tree, roots);
 			jqTree.data("allNodeList", allNodeList);
		}
 		return allNodeList;
 	}
 	
	/**
	 * 定义获取easyui tree的子节点的递归算法
	 */
 	function getChildNodeList(jqTree, tree, nodes) {
 		var childNodeList = [];
 		if (nodes && nodes.length>0) { 			
 			var node = null;
 			for (var i=0; i<nodes.length; i++) {
 				node = nodes[i];
 				childNodeList.push(node);
 				if (!tree.isLeaf(jqTree, node.target)) {
 					var children = tree.getChildren(jqTree, node.target);
 					childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children));
 				}
 			}
 		}
 		return childNodeList;
 	}
})(jQuery);

因为jquery easyui tree原生的搜索只支持ID搜索,所以扩展了jquery easyui tree搜索树节点的方法,使其支持节点名称的模糊匹配,并将不匹配的节点隐藏。

以上就是小编为大家带来的扩展jquery easyui tree的搜索树节点方法(推荐)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
jQuery原生的动画效果
Jul 10 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
react 生命周期实例分析
May 18 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 #Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 #Javascript
Javascript+CSS3实现进度条效果
Oct 28 #Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 #Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 #Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 #Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
实例解析php的数据类型
2018/10/24 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
MSN消息提示类
2006/09/05 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
浅析python参数的知识点
2018/12/10 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python爬虫要用到的库总结
2020/07/28 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
党员公开承诺事项
2014/03/25 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
信用卡工资证明范本
2014/10/17 职场文书
办公室主任个人总结
2015/02/28 职场文书
北京青年观后感
2015/06/15 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python