English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Extensión del método de búsqueda de nodos del tree de jquery easyui (recomendado)

Como se muestra a continuación:

/**
 * 1Extiende el método de búsqueda de nodos del easyui tree de jquery. El uso es el siguiente:
 * $("#treeId").tree("search", searchText);	 
 * Donde, treeId es el ID del elemento UL raíz del easyui tree, searchText es el texto de búsqueda.
 * si searchText está vacío o "", se restablecerá el estado normal de mostrar todos los nodos
 */
(function($) {	
	$.extend($.fn.tree.methods, {
		/**
		 * extender el método de búsqueda del easyui tree
		 * @param tree objeto jQuery del nodo DOM raíz (nodo UL) del easyui tree
		 * @param searchText Texto de búsqueda
		 * @param this-objeto tree del contexto easyui
		 */
		search: function(jqTree, searchText) {
			//easyui tree的tree对象。可以通过tree.methodName(jqTree)方式调用easyui tree的方法
			var tree = this;
			//obtener todos los nodos del árbol
			var nodeList = getAllNodes(jqTree, tree);
	 		//si no hay condiciones de búsqueda, mostrar todos los nodos del árbol
			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();
	 	 		
	 			//expandir el nodo seleccionado (si se seleccionó anteriormente)
	 			var selectedNode = tree.getSelected(jqTree);
	 			if (selectedNode) {
	 				tree.expandTo(jqTree, selectedNode.target);
	 			
	 			return;
	 		
	 		//buscar y resaltar los nodos coincidentes
	 		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);
	 				
	 			
	 			//ocultar todos los nodos
	 	 		for (var i=0; i<nodeList.length; i++
	 	 			$(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
	 	 			$(nodeList[i].target).hide();
	 	 		 			
	 			//plegar todos los nodos
	 	 		tree.collapseAll(jqTree);
	 			//mostrar todos los nodos coincidentes y sus nodos padre 			
	 			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);
											
			
		
	});
	/**
	 * Mostrar los nodos coincidentes con la búsqueda
	 */
	function showMatchedNode(jqTree, tree, node) {
 		//Mostrar todos los nodos superiores
 		$("node.target").show();
 		$(".tree-$("title", node.target).addClass("tree-node-targeted");
 		var pNode = node;
 		while ((pNode = tree.getParent(jqTree, pNode.target))) {
 			$("pNode.target").show(); 			
 		
 		//Expandir al nodo
 		tree.expandTo(jqTree, node.target);
 		//Si es un nodo no hoja, necesita plegar todos los nodos hijos del nodo
 		if (!tree.isLeaf(jqTree, node.target)) {
 			tree.collapse(jqTree, node.target);
 		
 	 	 
	/**
	 * Determinar si searchText coincide con targetText
	 * @param searchText Texto de búsqueda
	 * @param targetText Texto objetivo
	 * @return true-El texto de búsqueda coincide con el texto objetivo; de lo contrario, es false.
	 */
	function isMatch(searchText, targetText) {
 		return $.trim(targetText) !== "" && targetText.indexOf(searchText) !==-1;
 	
	/**
	 * Obtener todos los nodos del tree easyui
	 */
	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;
 	
	/**
	 * Definir el algoritmo recursivo para obtener los nodos hijos del 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;
 	

Debido a que la búsqueda nativa de easyui tree solo admite la búsqueda por ID, se ha extendido el método de búsqueda de nodos del tree de easyui para que admita la coincidencia borrosa de nombres de nodos y ocultar nodos no coincidentes.

Esto es todo el contenido que el editor les ha traído para expandir el método de búsqueda de nodos del tree de easyui jQuery (recomendado), esperamos que todos lo apoyen y griten tutorial~

Te gustaría que