easyui tree插件扩展

最新推荐文章于 2024-08-22 08:20:21 发布

stalwartwill

最新推荐文章于 2024-08-22 08:20:21 发布

阅读量5.8k

点赞数 1

分类专栏： JavaScript — jQuery

本文链接：https://blog.csdn.net/stalwartwill/article/details/34852283

版权

这段代码扩展了jQuery EasyUI Tree插件，增加了搜索功能。通过`$("#treeId").tree("search", searchText);`可以搜索树形结构中的节点，如果`searchText`为空则显示所有节点。此外，还提供了展示匹配节点及其父节点、滚动条滚动到指定节点等方法。" 102650514,9079035,Python面试必备：单例模式实现解析,"['Python', '面试技巧', '编程概念', '设计模式']

摘要由CSDN通过智能技术生成

/**
 * 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");
	  	  			$(