扩展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程序之undefined篇(中)
Nov 23 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
JS实现购物车特效
Feb 02 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现购物车全功能
Jan 11 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
php类
2006/11/27 PHP
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
微信小程序日历效果
2018/12/29 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
整理Python中的赋值运算符
2015/05/13 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
TensorFlow变量管理详解
2018/03/10 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python实现剪切功能
2019/01/23 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python导入pandas具体步骤方法
2019/06/23 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
一套带答案的C++笔试题
2014/01/10 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
大一军训感言
2014/01/09 职场文书
聘任书模板
2014/03/29 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
嘉宾邀请函
2015/01/31 职场文书
楚门的世界观后感
2015/06/03 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
python实现学员管理系统(面向对象版)
2022/06/05 Python