Dynamisches Laden des jQuery zTree-Baum-Plugins

In diesem Artikel wird hauptsächlich der Beispielcode für den dynamischen Ladeeffekt des jQuery-zTree-Baum-Plugins vorgestellt. Ich hoffe, er kann jedem helfen, die zTree-Funktion besser zu verstehen.

Anforderungen:

Aufgrund der großen Menge an Stammbaumdaten im Projekt besteht die allgemeine Lademethode darin, die Daten beim Laden der Seite über die zTree.init-Methode zu laden und alle Daten zu laden Die Daten auf einmal in die Seite einfügen. Im Projekt sind die Genealogie-Ebenen mit Zehntausenden von Ebenen sehr breit und tief, so dass es nach dem Laden überhaupt nicht mehr geladen werden kann. Daher ist es notwendig, die Methode des dynamischen Ladens (inkrementelles Laden) zu optimieren, um das Laden von Daten zu erleichtern und das Erlebnis zu verbessern.

Beheben Sie die Stromkreisunterbrechung:

Dies sollte einfach zu bewerkstelligen sein. Suchen Sie einfach das Klickereignis des übergeordneten Knotens, laden Sie dann die Daten und hängen Sie den Knoten an. Die Zeit war knapp und die Aufgaben waren schwer, so dass überhaupt keine Zeit für Recherchen blieb. Ich konnte nur auf klicken und nach „zTree dynamisches Laden“ suchen. Das Ergebnis wurde angezeigt und der Titel war korrekt, aber der darin enthaltene Code konnte nichts über das Hinzufügen eines Knotens finden ... Einerseits wurde ich durch Nachfrage dazu aufgefordert , aber andererseits konnte ich nichts Ähnliches finden. Sprachlos ... Ja, es gibt keine offizielle Website, also habe ich alle API-Funktionen durchsucht und schließlich eine Funktion namens addNodes gefunden. Glück!

Steuercode

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

Skriptcode (Implementierung der Knotenerweiterung und des dynamischen Ladens beim Klicken auf Ereignisse):

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

Die Backend-Anfrage:

Die Datenquelle ist der Anforderungspfad „/User/NextLeve?userId=xxx“, bei dem es sich um die JSON-Daten handelt, die eine Liste der folgenden Struktur zurückgeben (d. h. .ToJson()-Daten vom Typ List), wobei Die Benutzer-ID kann sein: Wenn sie leer ist, wird standardmäßig der aktuell angemeldete Benutzer verwendet:

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

Effekt, der durch das dynamische Laden untergeordneter Knoten implementiert wird, wenn auf den übergeordneten Knoten geklickt/erweitert wird.

Verwandte Empfehlungen:

Teilen der Verwendung des zTree-Baum-Plug-Ins in jQuery

Detaillierte Beispiele von jQuery EasyUI in Kombination mit zTree Baumstruktur zum Erstellen von Webseiten

Erklärung zu jQuery mit dem zTree-Plug-in zur Implementierung der Drag-and-Drop-Funktion

Das obige ist der detaillierte Inhalt vonDynamisches Laden des jQuery zTree-Baum-Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!