Detailed explanation of jquery easyui tree asynchronous loading of child nodes

The tree in easyui can be built from tags or by reading data by specifying a URL attribute. If you want to build an asynchronous tree, you need to specify an id attribute value for each node, so that the id parameter will be automatically passed to the background when loading data. This article mainly introduces the problem of parsing jquery easyui tree asynchronously loading child nodes. The tree in easyui can be established from tags or by reading data by specifying a URL attribute. Those who are interested can learn more. Hope it helps everyone.

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

Write the front-end code:

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

For testing, establish a node data model:

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

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

Official website example address: http://www.jeasyui.com/tutorial/tree/tree2.php

demo download: easyui-tree2_jb51.rar

Say important things three times !!!

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

The method must use POST. For GET, a variable must be used after the URL for timestamp processing.

Related recommendations:

Detailed explanation of the method of deleting tree nodes implemented by jQuery plug-in zTree

Multiple selection implemented by jQuery plug-in zTree Explanation of tree effect examples

jquery ztree Detailed explanation of examples of right-click collection function       

The above is the detailed content of Detailed explanation of jquery easyui tree asynchronous loading of child nodes. For more information, please follow other related articles on the PHP Chinese website!