Chargement dynamique du plug-in d'arbre jQuery zTree

Cet article présente principalement l'exemple de code de l'effet de chargement dynamique du plug-in d'arborescence jQuery zTree. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde à mieux comprendre la fonction zTree.

Exigences :

En raison de la grande quantité de données d'arbre généalogique dans le projet, la méthode de chargement générale consiste à charger les données via la méthode zTree.init lorsque la page est chargée, en chargeant toutes les données dans la page en même temps. Dans le projet, les niveaux de généalogie sont très larges et profonds, avec des dizaines de milliers de niveaux, donc une fois chargé, il ne peut pas être chargé du tout. Il est donc nécessaire d’optimiser la méthode de chargement dynamique (chargement incrémentiel) pour faciliter le chargement des données et améliorer l’expérience.

Résoudre la coupure de circuit :

Cela devrait être facile à faire, il suffit de trouver l'événement de clic du nœud parent, puis de charger les données et d'attacher le nœud. Le temps était compté et les tâches lourdes, ne laissant aucun temps pour la recherche. Je n'ai pu qu'appuyer sur et rechercher "chargement dynamique zTree". Le résultat est sorti et le titre était correct, mais le code à l'intérieur n'a rien trouvé sur l'ajout d'un nœud... D'une part, j'ai été invité par la demande. , mais d'un autre côté, je n'ai rien trouvé de similaire. Sans voix... Oui, il n'y a pas de site officiel, j'ai donc parcouru toutes les fonctions de l'API et j'ai finalement trouvé une fonction appelée addNodes. bonheur!

Code de contrôle

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

Code de script (implémentant l'expansion des nœuds et le chargement dynamique lors du clic sur les événements) :

<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>

La requête backend :

La source de données est le chemin de requête "/User/NextLeve?userId=xxx", qui correspond aux données json qui renvoient une liste de la structure suivante (c'est-à-dire des données .ToJson() de type List), où l'userId peut être, s'il est vide, l'utilisateur actuellement connecté sera pris par défaut :

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; }
}

effet, qui est implémenté en chargeant dynamiquement les nœuds enfants lorsque le nœud parent est cliqué/développé.

Recommandations associées :

Partage de l'utilisation du plug-in d'arborescence zTree dans jQuery

Exemples détaillés de jQuery EasyUI combiné avec l'arborescence zTree structure pour créer des pages Web

Explication sur jQuery utilisant le plug-in zTree pour implémenter la fonction glisser-déposer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!