Jquery zTree tree control asynchronous loading operation_jquery

zTree uses the core code of JQuery to implement a set of Tree plug-ins that can complete most common functions

• Compatible with IE, FireFox, Chrome and other browsers
• Multiple Tree instances can be generated simultaneously in one page
• Support JSON data
• Supports one-time static generation and Ajax asynchronous loading in two ways
• Supports multiple event responses and feedback
• Supports tree node movement, editing, and deletion
• Supports any skin change/personalized icon (relying on css)
• Supports extremely flexible checkbox or radio selection function
• Simple parameter configuration to achieve flexible functions

Asynchronous loading means: when you click to expand the tree node, request the background action to return the child node data of the clicked node and load it.

Here we mainly design the async attribute setting of ztree’s setting variable:

var setting = {
  async: {
   enable: true,
   url:InitServiceIpsData.action,
   autoParam:[id, name],
   dataFilter: filter  
  },
 

When you click to expand the tree node, the action specified by the URL will be requested to obtain the child node data, and then bound to the ztree.

Note that the background action here returns a JSON string, and ztree only receives arrays when binding new node data, so you need to use the filter function to perform data cleaning and conversion operations before binding, and convert the string into an array:

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

When you click to expand the ztree tree node, the action will be requested to obtain the child node data and bound.

The following is an implementation of background action:

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>
 

The above are the detailed steps for implementing asynchronous loading operation of Jquery zTree tree control. I hope it will be helpful to everyone's learning.