Über Jquery zTree Tree Control asynchrone Ladevorgänge

In diesem Artikel wird hauptsächlich der asynchrone Ladevorgang zur Baumsteuerung von Jquery zTree vorgestellt. Lernen Sie das asynchrone Laden von Jquery zTree zTree verwendet den Kerncode von JQuery, um eine Reihe von Tree-Plug-Ins zu implementieren, die die meisten gängigen Funktionen ausführen können

• Kompatibel mit IE, Firefox, Chrome und anderen Browsern

• Mehrere Bauminstanzen können gleichzeitig auf einer Seite generiert werden

• Unterstützt JSON-Daten

• Unterstützt einmalige statische Generierung und asynchrones Ajax-Laden

• Unterstützt mehrere Ereignisantworten und Feedback

• Unterstützt Verschieben, Bearbeiten und Löschen von Baumknoten

• Unterstützt jede Änderung des Skins/personalisierten Symbols (basierend auf CSS)

• Unterstützt äußerst flexible Kontrollkästchen- oder Radioauswahlfunktion

• Einfache Parameterkonfiguration zur Erzielung flexibler Funktionen

Asynchrones Laden

Dies bedeutet: Wenn ein Baumknoten vorhanden ist Wenn zum Erweitern darauf geklickt wird, wird die Hintergrundaktion aufgefordert, die untergeordneten Knotendaten des angeklickten Knotens zurückzugeben und zu laden. Hier entwerfen wir hauptsächlich die asynchrone Attributeinstellung der Einstellungsvariablen von ztree:

var setting = {
 async: {
  enable: true,
  url:InitServiceIpsData.action,
  autoParam:[id, name],
  dataFilter: filter 
 },

Wenn Sie auf klicken, um den Baumknoten zu erweitern, Es wird angefordert, dass die durch die URL angegebene Aktion die Daten des untergeordneten Knotens abruft und diese dann an den Ztree bindet.

Beachten Sie, dass die Hintergrundaktion hier eine JSON-Zeichenfolge zurückgibt und ztree nur Arrays empfängt, wenn neue Knotendaten gebunden werden. Daher müssen Sie vor der Bindung die Filterfunktion verwenden, um Datenbereinigungs- und Konvertierungsvorgänge durchzuführen, um die Zeichenfolge in umzuwandeln ein Array. :

//过滤异步加载ztree时返回的数据 
 function filter(treeId, parentNode, childNodes) {
 if (!childNodes) 
  return null; 
 childNodes = eval((+childNodes+)); //必须转换为[{id:103,pId:1,name:'子节点3'}];这样的格式 
 return childNodes;
 }

Auf diese Weise wird beim Erweitern des Ztree-Baumknotens die Aktion zum Abrufen des untergeordneten Knotens angefordert Daten und gebunden.

Das Folgende ist eine Implementierung der Hintergrundaktion:

public String InitServiceIpsData()
 {
 HttpServletRequest request = ServletActionContext.getRequest();
 String id = request.getParameter(id);
 String name = request.getParameter(name);
 System.out.println(请求获取+name+的ip列表);
  
 List<hashmap<string,object>> list = new ArrayList<hashmap<string,object>>();  
 for(int i = 1; i <= 2; i++){ 
  HashMap<string,object> hm = new HashMap<string,object>();  
  hm.put(id, id + 0 + i);
  hm.put(pId, id);
  hm.put(name, name + _IP_ + i);
  hm.put(isParent, false);
  list.add(hm);
 } 
  
 JSONArray finalJson = JSONArray.fromObject(list);
 this.initServiceIpsData = finalJson.toString();
 return SUCCESS;
 }</string,object></string,object></hashmap<string,object></hashmap<string,object>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es Wird für das Lernen aller nützlich sein. Bitte beachten Sie die chinesische PHP-Website für weitere verwandte Inhalte!

Verwandte Empfehlungen:

Das Problem der gemeinsamen Nutzung einer Komponente in Vue+Webpack (ausführliches Tutorial)

Wie es geht it in JavaScript Setter- und Getter-Methoden verwenden

Informationen zur Verwendung von Gojs-Komponenten in JS-Komponenten

Das obige ist der detaillierte Inhalt vonÜber Jquery zTree Tree Control asynchrone Ladevorgänge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!