Jqueryztree implements tree search function _ jquery

This article mainly introduces the Tree search function of jqueryztree. zTree is a set of Tree plug-ins that can complete most common functions using JQuery's core code, if you are interested in ztree, you can refer to the examples in this article to share the jquery ztree implementation tree search function for your reference. The specific content is as follows:

var userZTree; var userSetting={   check: {    enable: true,    chkStyle: "radio",    chkboxType : {"Y" : "" , "N" : ""},    radioType: "all"   },   data: {    simpleData: {     enable: true,     idKey : "id",     pIdKey : "pid"    }   },   callback:{    onClick : clickCheck   },   view :{    showIcon: false,    fontCss: getFontCss   } }; 

Here we need to add a property: view: {fontCss: getFontCss}
Here, getFontCss writes a method for itself:

function getFontCss(treeId, treeNode) {  return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"}; } 

In this way, the color changing function can be realized;
Next, add a search input box above the self-written display tree:

   
    
                
   
   
Filter by name:
   
 
 
 

Here we can see that the changeColor method is called:

// Use the search data and highlight function. Two steps are required. // 1. add fontCss: getFontCss settings to the setting view settings of the tree. // 2. add a text box at the top of the ztree container and add an onkeyup event. This event calls the fixed method changeColor (id, key, value) // id refers to the id of the ztree container, which is generally ul, key refers to which attribute of the data of the ztree node is used as the filter condition, and value refers to the filter condition. The filter is a fuzzy filter function changeColor (id, key, value) {treeId = id; updateNodes (false); if (value! = "") {Var treeObj = $. fn. zTree. getZTreeObj (treeId); nodeList = treeObj. getNodesByParamFuzzy (key, value); if (nodeList & nodeList. length> 0) {updateNodes (true) ;}} function updateNodes (highlight) {var treeObj =$. fn. zTree. getZTreeObj (treeId); for (var I = 0; I
 
  

  
Is the ztree function for retrieval;
In this way, you can implement the search function.
  
The above is the information about how ztree is analyzed to implement the tree search function. We hope to learn from you.