jQuery zTree tree plugin dynamic loading

This article mainly introduces the example code of the dynamic loading effect of the jQuery zTree tree plug-in. Friends in need can refer to it, hoping to help everyone better understand the zTree function.

Requirements:

Due to the large amount of family tree data in the project, the general loading method is to load the data through the zTree.init method when the page is loaded, and load all the data into the page at once. . In the project, the genealogy levels are very wide and deep, with tens of thousands of levels, so once loaded, it cannot be loaded at all. Therefore, it is necessary to optimize the method of dynamic loading (incremental loading) to facilitate data loading and improve the experience.

Solve the broken circuit:

This should be easy to handle, just find the parent node click event, then load the data, and attach the node. Time was tight and the tasks were heavy, leaving no time for research at all. I could only press on and search for "zTree dynamic loading". The result came out, and the title was correct, but the code inside couldn't find anything about adding a node... On one hand, I was prompted by demand, but on the other hand, I couldn't find anything similar. Speechless... Yes, there is no official website, so I browsed all the API functions and finally found a function called addNodes. happiness!

Control code

<p class="UserTree">
  <ul id="treeDemo" class="ztree"></ul>
</p>

Script code (implementing node expansion and dynamic loading when clicking events):

<script>
  var zNodes;
  var zTree;
  $(function () {
    $.ajax({
      cache: true,
      type: "get",
      url: "/User/NextLeve",
      async: false,
      success: function (data) {
        zNodes = data;
      },
      error: function (data) {
        alert("error");
      }
    });
    zTree = ZTreeCustom.init($("#treeDemo"), setting, zNodes);
    zTree.expandAll(false);
  })
  var setting = {
    view: {
      nameIsHTML: true
    },
    data: {
      simpleData: {
        enable: true
      },
      keep: {
        parent: true
      }
    },
    open: false,
    callback: {
      onClick: nodeClick,
      onExpand: function (event, treeId, treeNode) {
        addSubNode(treeNode);
      }
    }
  };
  function showIconForTree(treeId, treeNode) {
    return !treeNode.isParent;
  };
  function searchM() {
    var username = $("#txtName").val()
  }
  function nodeClick(event, treeId, treeNode, clickFlag) {
    addSubNode(treeNode);
  }
  function addSubNode(treeNode) {
    if (!treeNode.isParent) return;
    var s = treeNode.children;
    if (s != undefined)
      return;
    $.ajax({
      cache: true,
      type: "get",
      url: "/User/NextLeve",
      data: { userId: treeNode.id },
      async: true,
      success: function (data) {
        zTree.addNodes(treeNode, data);
      },
      error: function (data) {
        alert("error");
      }
    });
  }
</script>

The backend request:

The data source is the request path "/User/NextLeve?userId=xxx", which is the json data that returns a list with the following structure (that is, .ToJson() data of the List type), where the userId can be, and the default is when it is empty Take the currently logged in user:

public class UserNode
{
  public long id { get; set; }
  public long pId { get; set; }
  public string name { get; set; }
  public bool open { get; set; }
  public bool isParent { get; set; }
  public string icon { get; set; }
}

The effect is to dynamically load child nodes when clicking/expanding the parent node.

Related recommendations:

Sharing the use of zTree tree plug-in in jQuery

Detailed examples of jQuery EasyUI combined with zTree tree structure to create web pages

Examples to explain how jQuery uses the zTree plug-in to implement drag-and-drop functionality

The above is the detailed content of jQuery zTree tree plugin dynamic loading. For more information, please follow other related articles on the PHP Chinese website!