扩展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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
浅谈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
php layui实现前端多图上传实例
2019/07/30 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
JsDom 编程小结
2011/08/09 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Python FFT合成波形的实例
2019/12/04 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
文明宿舍获奖感言
2014/02/07 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
优秀求职信
2014/05/29 职场文书
普通员工辞职信范文
2015/05/12 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
浅谈Python协程asyncio
2021/06/20 Python
AngularJS实现多级下拉框
2022/03/25 Javascript
openstack云计算keystone组件工作介绍
2022/04/20 Servers
Nginx 常用配置
2022/05/15 Servers