扩展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 相关文章推荐
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 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中eclipse 用空格替换 tab键
2013/06/24 PHP
php实现的RSS生成类实例
2015/04/23 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
python rsa 加密解密
2017/03/20 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
通过cmd进入python的实例操作
2019/06/26 Python
python实现动态数组的示例代码
2019/07/15 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python虚拟环境venv用法详解
2020/05/25 Python
科室工作的个人自我评价
2013/10/30 职场文书
证婚人经典证婚词
2014/01/09 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
药剂专业自荐书
2014/06/20 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
迎国庆横幅标语
2014/10/08 职场文书
搞笑老公保证书
2015/02/26 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python