Explication détaillée du chargement asynchrone de l'arbre jquery easyui des nœuds enfants

L'arborescence dans easyui peut être construite à partir de balises ou en lisant des données en spécifiant un attribut d'URL. Si vous souhaitez créer une arborescence asynchrone, vous devez spécifier une valeur d'attribut id pour chaque nœud, afin que le paramètre id soit automatiquement passé en arrière-plan lors du chargement des données. Cet article présente principalement le problème de l'analyse de l'arborescence jquery easyui chargeant de manière asynchrone les nœuds enfants. L'arborescence dans easyui peut être établie à partir de balises ou en lisant des données en spécifiant un attribut d'URL. Ceux qui sont intéressés peuvent en savoir plus. J'espère que cela aide tout le monde.

<ul id="tt"></ul>

Écrivez le code front-end :

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

Pour les tests, établissez un modèle de données de nœud :

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

Écrivez le code du contrôleur back-end :

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

Exemple d'adresse du site officiel : http://www.jeasyui.com/tutorial/tree/tree2.php

Téléchargement de la démo : easyui-tree2_jb51.rar

Dites les choses importantes trois fois !!!

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

La méthode doit être POST Pour GET, une variable doit être utilisée après l'URL pour le traitement de l'horodatage.

Recommandations associées :

Explication détaillée de la méthode de suppression des nœuds d'arbre implémentée par le plug-in jQuery zTree

Plusieurs sélection implémentée par le plug-in jQuery zTree Explication des exemples d'effets d'arbre

Explication détaillée de l'implémentation jquery ztree de la fonction de collecte par clic droit 

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!