JQuery zTree search-code for the keyword query recursive infinite Layer function, jqueryztree

JQuery zTree search-code for the keyword query recursive infinite Layer function, jqueryztree

Niaoyiha

A friend told me two days ago that I would like to have a ztree search function, but I am a slap in the face: Isn't this method missing from many predecessors? I am very busy ~ Then I squatted silently to write the zTree search method. Why? Because I said, "It is impossible to find it. It must have been done by many people. I cannot find it for you and ask you to have lunch ", however, I have not found it for a long time (tears, my plan, my lunch ~). Most of them use the getNodesByParamFuzzy () or highlighted APIs. However, a friend says the requirement does not meet: 1. the parent node fails to be matched. 2. you can customize the matching rules, that is, the matching name can also match the attributes ...... (What I want is not a hot one. I have a smile on my face ....... so I will write it to you ~), Enter the text below:

Mind Map

　　

Generally, the search function only matches the keyword in the "defined range (convenient name)". The "established range" means that we already know the search scope, such as a text library and a drop-down box, in other words, the size of the matched object set is determined. However, this is not feasible on ztree. Why? When I considered the logic for implementing the ztree search function, I asked: What, is the hierarchy of this tree fixed? Or are you not sure how many layers are there? Old brother looked at me and smiled: you write on the infinite Layer ~ A small child has a stomachache .. Because the hierarchy of the tree is uncertain, the search range is uncertain. For example, if the target node matches successfully, if the node is a subnode, its parent node should also be displayed, then the parent node of its parent node should also be displayed, and then the parent node of its parent node is... orz... it seems that it will never end... no way, you can only: recursion, find all the parent nodes and child nodes of the target node.

Key logic points

In the above mind map, I roughly listed the logic. When the target node is displayed and hidden, this is a key point we must be clear about, next, let's take a look at the specific situation of the target node:

　　

At this point, I believe that the development of search functions that meet our needs has been able to achieve the goal. The rest is just the implementation method. However, this is not a problem at all ~ (I think that the process is really confusing. Do you understand the implementation methods? 0. 0 ..)

About Tree nodes

To complete the methods in the above process, we need to know a series of attributes of the Tree node. We all know that there are artifacts like api, however, one feature of APIS is that they are complete (it may take a while to find a specific attribute or method ), here we want to quickly obtain the desired attributes or methods. We can print the tree node set on the console:

Var treeObj = $. fn. zTree. getZTreeObj ("homeTree"); // set the root node var node = treeObj. getNodes (); // get the root node var nodes = treeObj. transformToArray (node); // obtain the console of all nodes. log (nodes );

See the figure: we can see all nodes, including attributes such as id and name.

See the figure again: we can see various attributes of any node, including the desired child node set childern, parent node attribute isParent, node id tId, parent node id parentTid...

Everything is ready.

Next, let's take a look at the relevant methods. Many small details need to be found in the real encoding process. Here we will list the methods for convenience of demonstration.

Declare an alternative array:

// Search for var parentArray = []; var childArray = [];

Recursively retrieve the parent node set of the target node:

// Recursively retrieve all the parent nodes of the target node. function getParentsNode (treeNode) {var thisParentNode = treeNode. getParentNode (); // obtain the parent node if (thisParentNode! = Null) {// parentArray. push (thisParentNode) exists on the parent node; // store it to the array getParentsNode (thisParentNode); // reset} else {return false ;}}

Recursively retrieve the child node set of the target node:

// Recursively retrieve all child nodes of the target node. function getChildrenNode (treeNode) {var thisIsParent = treeNode. isParent; // obtain the isParent attribute of the target node and determine whether it is the parent node if (thisIsParent = true) {var thisChildrenNode = treeNode. children; // obtain the child node set of the node for (var I = 0; I <thisChildrenNode. length; I ++) {childArray. push (thisChildrenNode [I]); // Add this subnode to the array getChildrenNode (thisChildrenNode [I]); // reset} else {return false ;}}

We recommend that you extract the matching node part and write a separate method to facilitate the expansion of matching rules. Here we assume that in addition to matching the name, we also need to match the entity_code attribute of the node:

// Match the node function matchNode (treeNode, num) {var inputArea = $ ("input [name = 'searcharea ']"); var name = treeNode. name; var entityCode = treeNode. entity_code | ''; var val = inputArea. val (); // obtain the retrieved value var numName = name. indexOf (val); var numCode = entityCode. indexOf (val); var num =-1; if (numName! =-1 | numCode! =-1) {num = 1;} if (numName =-1 & numCode =-1) {num =-1;} return num ;}

Method for successful node matching:

// Function checkTrueArray (arr, treeNode) {var thisTid = treeNode. tId; var thisLi = $ ("#" + thisTid); for (var n = 0; n <arr. length; n ++) {var thisNodeId = arr [n]. tId; var thisNodeLi = I ("#" + thisNodeId); thisLi. show (); thisNodeLi. show ();}}

Failed node matching method:

// Function checkFalseArray (arr, treeNode) {var result = []; var result2 = []; var thisTid = treeNode. tId; var thisLi = $ ("#" + thisTid); var val = inputArea. val (); // obtain the retrieved value var thisParent = treeNode. getParentNode (); // obtain the target node's parent node if (thisParent! = Null) {// var thisBrotherArr = treeNode. getParentNode (). children; // obtain the sibling array containing itself (var m = 0; m <arr. length; m ++) {// match the parent node var num = matchNode (arr [m]); if (num! =-1) {result. push (arr [m]);} var resultLength = result. length; for (var m = 0; m <thisBrotherArr. length; m ++) {// match the sibling node var num = matchNode (thisBrotherArr [m]); if (num! =-1) {result2.push (thisBrotherArr [m]) ;}} var resultleng2= result2.length; // If the node fails to match itself, it must be shown that the parent node matches successfully, if (resultLength = 0 & resultlength1 = 0) | resultleng2! = 0) {thisLi. hide ();} if (resultLength! = 0 & resultlengh2 = 0) {thisLi. show () ;}} else {thisLi. hide ();}}

The target node fails to match. The target node has a parent node and a child node:

// The target node fails to match. The target node has both the parent node and the child node function checkAllArray (arr, arr2, treeNode) {var result = []; var result2 = []; var thisTid = treeNode. tId; var thisLi = $ ("#" + thisTid); var val = inputArea. val (); // obtain the search value for (var m = 0; m <arr. length; m ++) {// match the child node or parent node var num = matchNode (arr [m]); if (num! =-1) {result. push (arr [m]); // The matching is successfully stored in the array} var resultLength = result. length; // obtain the length of the returned array after successful match (var m = 0; m <arr2.length; m ++) {// match the subnode or parent node var num = matchNode (arr2 [m]); if (num! =-1) {result2.push (arr2 [m]); // The matching is successfully saved to the array} var resultlength1 = result2.length; // obtain the length of the returned array if (resultLength = 0 & resultlength1 = 0) after successful match. {// The child node and parent node both fail to match thisLi. hide ();} else {thisLi. show (); // One of the matches is successful or both matches are successful }}

Define the search method:

Function searchArea (treeId, treeNode) {// defines the search method var inputArea =$ ("input [name = 'searcharea ']"); var val = inputArea. val (); // obtain the retrieved value var treeObj = $. fn. zTree. getZTreeObj ("homeTree"); // set the root node var node = treeObj. getNodes (); // get the root node var nodes = treeObj. transformToArray (node); // obtain the console of all nodes. log (nodes); for (var I = 0; I <nodes. length; I ++) {var thisNodePid = nodes [I]. pId; var thisParentNode = parentArray = []; ChildArray = []; getParentsNode (nodes [I]); // obtain the array getChildrenNode (nodes [I]) returned by all parent nodes of the target node; // returns the array var num = matchNode (nodes [I]) if (nodes [I]. isParent = false) {if (num! =-1) {checkTrueArray (parentArray, nodes [I]);} else {checkFalseArray (parentArray, nodes [I]);} if (nodes [I]. isParent = true) {if (num! =-1) {checkTrueArray (parentArray, nodes [I]); checkTrueArray (childArray, nodes [I]);} else {checkAllArray (parentArray, childArray, nodes [I]) ;}}}

Call the search method:

// Call the search method $ (". searchAreaBtn "). click (function (treeId, treeNode) {searchArea (treeId, treeNode) ;}); var inputArea =$ ("input [name = 'searcharea ']"); inputArea. keyup (function (treeId, treeNode, e) {var e = event | window. event; var val = inputArea. val (); if (e. keyCode = 13 | val = "") {searchArea (treeId, treeNode );}});

View the results (there is a problem with the computer ps. Use the figure of meitu xiuxiu ~ ...):

Conclusion

Theoretically speaking, it should be able to support unlimited layers. I tried a maximum of four layers. No problem. I didn't do more tests. If you are interested, you can try it. If you need a demo, you can leave a message and learn from each other, make progress together ~

Summary

The above is the jQuery zTree search-Keyword query recursive infinite Layer function implementation Code introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!