jQuery zTree How to Change the Text Style of a Specified Node

Requirements: After opening the page, a tree with nodes has been generated. It is necessary to update the status of each node in the tree in real time, and change the ICON and FONT styles of nodes according to the status.

Description: Looking for 1, basically it is said that the color is specified when loading, and the usage of the color is specified when loading, which is explained in the official example:

Example: Displaying a tree of custom fonts

<SCRIPT type="text/javascript"> 
  <!-- 
  var setting = { 
    view: { 
      fontCss: getFont, 
      nameIsHTML: true 
    } 
  }; 
  var zNodes =[ 
    { name:" Bold font ", <span style="color: #ff0000;">font:{'font-weight':'bold'}</span> }, 
    { name:" Italic font ", font:{'font-style':'italic'}}, 
    { name:" Words with background ", font:{'background-color':'black', 'color':'white'}}, 
    { name:" Red character ", font:{'color':'red'}}, 
    { name:" Blue word ", font:{'color':'blue'}}, 
    { name:"<span style='color:blue;margin-right:0px;'>view</span>.<span style='color:red;margin-right:0px;'>nameIsHTML</span>"}, 
    { name:"zTree  Default style "} 
  ]; 
  function getFont(treeId, node) { 
    return node.font ? node.font : {}; 
  } 
  $(document).ready(function(){ 
    $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
  }); 
  //--> 
</SCRIPT> 

Example: Custom Icon--icon Attribute

<SCRIPT type="text/javascript"> 
  <!-- 
  var setting = { 
    data: { 
      simpleData: { 
        enable: true 
      } 
    } 
  }; 
  var zNodes =[ 
    { id:1, pId:0, name:" Unfold, fold   Custom icons are different ", open:true, iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png", iconClose:"../../../css/zTreeStyle/img/diy/1_close.png"}, 
    { id:11, pId:1, name:" Leaf node 1", icon:"../../../css/zTreeStyle/img/diy/2.png"}, 
    { id:12, pId:1, name:" Leaf node 2", icon:"../../../css/zTreeStyle/img/diy/3.png"}, 
    { id:13, pId:1, name:" Leaf node 3", icon:"../../../css/zTreeStyle/img/diy/5.png"}, 
    { id:2, pId:0, name:" Unfold, fold   Custom icons are the same ", open:true, icon:"../../../css/zTreeStyle/img/diy/4.png"}, 
    { id:21, pId:2, name:" Leaf node 1", icon:"../../../css/zTreeStyle/img/diy/6.png"}, 
    { id:22, pId:2, name:" Leaf node 2", icon:"../../../css/zTreeStyle/img/diy/7.png"}, 
    { id:23, pId:2, name:" Leaf node 3", <span style="color: #ff0000;">icon:"../../../css/zTreeStyle/img/diy/8.png"</span>}, 
    { id:3, pId:0, name:" Do not use custom icons ", open:true }, 
    { id:31, pId:3, name:" Leaf node 1"}, 
    { id:32, pId:3, name:" Leaf node 2"}, 
    { id:33, pId:3, name:" Leaf node 3"} 
  ]; 
  $(document).ready(function(){ 
    $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
  }); 
  //--> 
</SCRIPT> 

You can see that each NODE has one FONT attribute, which is the same level as NAME. You can specify its text style by setting FONT.

As you can see from the second example, there is also an ICON attribute. You can set the changed icon by setting the ICON property.

Application: Update tree state ICON and FONT styles in real time

$(document).ready(function(){ 
  $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
  zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
  rMenu = $("#rMenu"); 
  setTimeout("updateDev()",1000);  //  After initializing the tree, start updating the state, don't use setInterval It's over  
}); 
var baseImgPath = "<%=basePath%>img/";   // basePath Is through JSP The system root path obtained, without the relative path  
function updateTree(){ 
  toDwr.getAllCode(function back(values){ 
    if(null != values && ""!=values){ 
      for(var code in values){ 
        <span style="color: #ff0000;">var node = zTree.getNodeByParam("id", code, null);</span> //  Each tree has a number, and the nodes are found by the number  
        if(null != node){ 
          <span style="color: #ff0000;">node.font={'color':'red'};</span>      //  Set the text style, here set the text color  
          <span style="color: #ff0000;">node.icon=baseImgPath+"monitor.png";</span> //  Set the node icon  
          zTree.updateNode(node);       //  Update this node  
        } 
      } 
    } 
    setTimeout("updateTree()",1000); 
  } 
} 

Remarks:

Here, DWR is used for asynchronous interaction and returns the list code that needs to be updated. In practical application, we can return the response object according to the actual situation, and judge which style to update according to the attributes of the object.

It is not recommended to use setInterval here. It is recommended to use setTimeout before starting the next update operation after polling once.