Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung des asynchronen Ladens untergeordneter Knoten im JQuery EasyUI-Baum

小云云
Freigeben: 2018-01-23 10:02:49
Original
2353 Leute haben es durchsucht

Der Baum in easyui kann aus Tags oder durch Lesen von Daten durch Angabe eines URL-Attributs erstellt werden. Wenn Sie einen asynchronen Baum erstellen möchten, müssen Sie für jeden Knoten einen ID-Attributwert angeben, damit der ID-Parameter beim Laden von Daten automatisch an den Hintergrund übergeben wird. In diesem Artikel wird hauptsächlich das Problem des asynchronen Ladens von untergeordneten Knoten im JQuery-EasyUI-Baum vorgestellt. Der Baum in EasyUI kann aus Tags oder durch Lesen von Daten durch Angabe eines URL-Attributs erstellt werden. Ich hoffe, es hilft allen.

<ul id="tt"></ul>
Nach dem Login kopieren

Schreiben Sie den Front-End-Code:

$('#tt').tree({
  url:'/demo2/node/getNodes'  // The url will be mapped to NodeController class and getNodes method
});
Nach dem Login kopieren

Erstellen Sie zum Testen ein Knotendatenmodell:

@Table(name="nodes")
public class Node extends ActiveRecordBase{
  @Id public Integer id;
  @Column public Integer parentId;
  @Column public String name;
 
  public boolean hasChildren() throws Exception{
    long count = count(Node.class, "parentId=?", new Object[]{id});
    return count > 0;
  }
}
Nach dem Login kopieren

Schreiben Sie den Back-End-Controller-Code :

public class NodeController extends ApplicationController{
  /**
   * get nodes, if the 'id' parameter equals 0 then load the first level nodes,
   * otherwise load the children nodes
   * @param id the parent node id value
   * @return the tree required node json format
   * @throws Exception
   */
  public View getNodes(int id) throws Exception{
    List<Node> nodes = null;
 
    if (id == 0){  // return the first level nodes
      nodes = Node.findAll(Node.class, "parentId=0 or parentId is null", null);
    } else {  // return the children nodes
      nodes = Node.findAll(Node.class, "parentId=?", new Object[]{id});
    }
 
    List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
    for(Node node: nodes){
      Map<String,Object> item = new HashMap<String,Object>();
      item.put("id", node.id);
      item.put("text", node.name);
 
      // the node has children, 
      // set the state to 'closed' so the node can asynchronous load children nodes 
      if (node.hasChildren()){
        item.put("state", "closed");
      }
      items.add(item);
    }
 
    return new JsonView(items);
  }
}
Nach dem Login kopieren

Offizielle Website-Beispieladresse: http://www.jeasyui.com/tutorial/tree/tree2.php

Demo-Download: easyui-tree2_jb51.rar

Sagen Sie wichtige Dinge dreimal!!!

$('#tt').tree({
  method:"POST",
  url:'/demo2/node/getNodes'  // The url will be mapped to NodeController class and getNodes method
});
Nach dem Login kopieren

Die Methode muss POST sein, für die Zeitstempelverarbeitung muss nach der URL eine Variable verwendet werden.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Methode zum Löschen von Baumknoten, die durch das jQuery-Plug-in zTree implementiert wird

Mehrere Auswahl implementiert durch jQuery-Plug-in zTree Erläuterung von Beispielen für Baumeffekte

Detaillierte Erläuterung der JQuery-Ztree-Implementierung der Rechtsklick-Sammelfunktion 

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des asynchronen Ladens untergeordneter Knoten im JQuery EasyUI-Baum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage