How to achieve linkage between two zTree in a single page

This time I will show you how to realize the linkage of two zTree in a single page. What are the precautions to realize the linkage of two zTree in a single page. The following is a practical case. Get up and take a look.

Introduction

zTree uses the core code of JQuery to implement a set of Tree plug-ins that can complete most common functions

• Compatible with IE, FireFox, Chrome and other browsers

• Can generate multiple Tree instances simultaneously in one page

• Supports JSON data

• Support one-timestaticGenerate and Ajax asynchronous loading two ways

##Support multiple
• eventsResponse and feedback

Supports tree node movement, editing,
• delete

Supports any change of skin/personalized icon (relies on css)
Support extremely flexible checkbox or radio selection function
Simple parameter configuration realizes flexible and changeable functions

Introduction

When developing today, due to requirements, we need to implement two trees on the left and right of the same page. If a node of a certain tree is selected, the corresponding node of the other tree will also be selected. (The two trees are related. Of course, you can change the linkage conditions and methods according to your own needs).

The code for the implementation tree is no longer pasted here, only the method to achieve linkage is shown.

Code:

function linkageTreeClick(event, treeId, treeNode) {
  var param = treeNode.id; //获得点击树的ID
  var otherTree = $.fn.zTree.getZTreeObj(treeId);
  // 选取树的所有节点
  var nodes = otherTree.getNodesByParam(param);
  //遍历树的节点
  for (var i in nodes) {
   if(param==nodes[i].id){
    otherTree.selectNode(nodes[i]);
    return;
   }
  }
 }

The treeId is the ID of the tree you want to link with. Call this method in the

onclick method of zTree. Pass in the parameters according to your own situation, and then implement the linkage.

Method

selectNode()The parameter is the node of the tree, and its function is to make the node selected.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JS’s class, constructor, and factory functions

How to call the WeChat sharing function in nodejs

The above is the detailed content of How to achieve linkage between two zTree in a single page. For more information, please follow other related articles on the PHP Chinese website!