Erweiterung der Suchbaumknotenmethode von jquery easyui tree (empfohlen)

Wie folgt:

/**
 * 1Erweitert die Suchmethode der jQuery easyui tree Knoten.
 * $("#treeId").tree("search", searchText);	 
 * Darunter ist treeId die ID des Root-UL-Elements des easyui tree, searchText der zu durchsuchende Text.
 * Wenn searchText leer oder "" ist, wird der normale Zustand der Anzeige aller Knoten wiederhergestellt
 */
(function($) {	
	$.extend($.fn.tree.methods, {
		/**
		 * Erweiterung der easyui tree Suchmethode
		 * @param tree easyui tree root DOM node (UL node) jQuery object
		 * @param searchText Gesuchter Text
		 * @param this-context easyui tree object
		 */
		search: function(jqTree, searchText) {
			//easyui tree-Objekt. Es kann easyui tree-Methoden auf die Weise tree.methodName(jqTree) aufgerufen werden
			var tree = this;
			//Alle Baumknoten erhalten
			var nodeList = getAllNodes(jqTree, tree);
	 		//Wenn keine Suchkriterien angegeben sind, werden alle Baumknoten angezeigt
			searchText = $.trim(searchText);
	 		if (searchText == "") {
	 			for (var i=0; i<nodeList.length; i++) {
	 				$.show(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
	 	 			$(nodeList[i].target).show();
	 	 		}
	 			//Öffne den ausgewählten Knoten (wenn zuvor ausgewählt)
	 			var selectedNode = tree.getSelected(jqTree);
	 			if (selectedNode) {
	 				tree.expandTo(jqTree, selectedNode.target);
	 			}
	 			return;
	 		}
	 		//Suche nach passenden Knoten und markiere sie fett
	 		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);
	 				}
	 			}
	 			//Alle Knoten ausblenden
	 	 		for (var i=0; i<nodeList.length; i++) {
	 	 			$.show(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
	 	 			$(nodeList[i].target).hide();
	 	 		} 			
	 			//Alle Knoten einklappen
	 	 		tree.collapseAll(jqTree);
	 			//Zeige alle passenden Knoten und übergeordneten Knoten 			
	 			for (var i=0; i<matchedNodeList.length; i++) {
	 				showMatchedNode(jqTree, tree, matchedNodeList[i]);
	 			}
	 		} 	 
		},
		/**
		 * Zeigen Sie die Unter knots des Knotens (die Unter knots könnten während des Suchvorgangs versteckt worden sein)
		 * @param node easyui tree-Knoten
		 */
		showChildren: function(jqTree, node) {
			//easyui tree-Objekt. Es kann easyui tree-Methoden auf die Weise tree.methodName(jqTree) aufgerufen werden
			var tree = this;
			//Zeigen Sie die Unter knots an
			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();
						}
					}
				}
			} 	
		},
		/**
		 * Scrollen Sie den Scrollbalken zum angegebenen Knotenposition, um den Knoten sichtbar zu machen (wenn ein Scrollbalken vorhanden ist, wird gescrollt, wenn nicht, wird nicht gescrollt)
		 * @param param {
		 * 	 treeContainer: Der easyui tree-Container (d.h. der Container mit dem Scrollbalken). Wenn null, wird der Elternteilknoten des Root-UL-Knotens von easyui tree genommen
		 *  targetNode: Der easyui tree-Knoten, zu dem gescrollt werden soll. Wenn targetNode leer ist, wird standardmäßig zum derzeit ausgewählten Knoten gescrollt, wenn kein ausgewählter Knoten vorhanden ist, wird nicht gescrollt
		 * } 
		 */
		scrollTo: function(jqTree, param) {
			//easyui tree-Objekt. Es kann easyui tree-Methoden auf die Weise tree.methodName(jqTree) aufgerufen werden
			var tree = this;
			//Wenn node leer ist, dann holen Sie den derzeit ausgewählten node
			var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);
			if (targetNode != null) {
				//Prüfen Sie, ob der Knoten im sichtbaren Bereich ist				
				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);
				}							
			}
		}
	});
	/**
	 * Zeigen Sie den gesuchten Knoten an
	 */
	function showMatchedNode(jqTree, tree, node) {
 		//Zeigen Sie alle übergeordneten Knoten an
 		$.show(node.target);
 		$.show(".tree-$.addClass("tree-node-targeted");
 		var pNode = node;
 		while ((pNode = tree.getParent(jqTree, pNode.target))) {
 			$.show(pNode.target); 			
 		}
 		//Erweitern Sie bis zu diesem Knoten
 		tree.expandTo(jqTree, node.target);
 		//Wenn es sich um einen nicht-blättrigen Knoten handelt, müssen alle Unter节点 des Knotens gefaltet werden
 		if (!tree.isLeaf(jqTree, node.target)) {
 			tree.collapse(jqTree, node.target);
 		}
 	} 	 
	/**
	 * Überprüfen Sie, ob searchText mit targetText übereinstimmt
	 * @param searchText Gesuchter Text
	 * @param targetText Zieltext
	 * @return true-Der gesuchte Text stimmt mit dem Zieltext überein; andernfalls ist der Wert false.
	 */
	function isMatch(searchText, targetText) {
 		return $.trim(targetText) !== "" && targetText.indexOf(searchText) !==-1;
 	}
	/**
	 * Erfassen Sie alle Node-Knoten des easyui tree
	 */
	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;
 	}
	/**
	 * Definieren Sie das rekursive Algorithmus zur Erzeugung der Unter节点 von 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);

Da die native Suche von jQuery easyui tree nur die ID-Suche unterstützt, wurde die Methode zum Suchen von Knoten im jQuery easyui tree erweitert, um eine vage Übereinstimmung der Knotenname zu unterstützen und die nicht übereinstimmenden Knoten zu verbergen.

Dies ist alles, was der Autor Ihnen mitgebracht hat, um die Methode zum Suchen von Knoten im erweiterten jQuery easyui tree zu erlernen (Empfohlen). Ich hoffe, dass alle viele Unterstützung für das Shouting-Tutorial geben~