Home > Web Front-end > JS Tutorial > Detailed explanation of jquery easyui tree asynchronous loading of child nodes

Detailed explanation of jquery easyui tree asynchronous loading of child nodes

小云云
Release: 2018-01-23 10:02:49
Original
2388 people have browsed it

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>
Copy after login

Write the front-end code:

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

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;
  }
}
Copy after login

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);
  }
}
Copy after login

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
});
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template