Jquery zTree-Baumsteuerung asynchrones Laden operation_jquery

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 Tree-Instanzen können gleichzeitig auf einer Seite generiert werden
• Unterstützung von JSON-Daten
• Unterstützt die einmalige statische Generierung und das asynchrone Ajax-Laden auf zwei Arten
• Unterstützt mehrere Ereignisantworten und Feedback
• Unterstützt das Verschieben, Bearbeiten und Löschen von Baumknoten
• Unterstützt alle Skin-Änderungen/personalisierten Symbole (basierend auf CSS)
• Unterstützt eine äußerst flexible Kontrollkästchen- oder Optionsauswahlfunktion
• Einfache Parameterkonfiguration zur Erzielung flexibler Funktionen

Asynchrones Laden bedeutet: Wenn Sie auf den Baumknoten klicken, um ihn zu erweitern, fordern Sie die Hintergrundaktion an, die Daten des untergeordneten Knotens 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 den Baumknoten klicken, um ihn zu erweitern, wird die durch die URL angegebene Aktion angefordert, um die Daten des untergeordneten Knotens abzurufen, und dann an den Ztree gebunden werden.

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

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

Wenn Sie auf den Ztree-Baumknoten klicken, um ihn zu erweitern, wird die Aktion zum Abrufen der Daten des untergeordneten Knotens angefordert 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>
 

Die oben genannten Schritte sind die detaillierten Schritte zur Implementierung des asynchronen Ladevorgangs der Jquery-zTree-Baumsteuerung. Ich hoffe, dass sie für das Lernen aller hilfreich sind.