About Jquery zTree tree control asynchronous loading operation

This article mainly introduces the Jquery zTree tree control asynchronous loading operation, learn Jquery zTree asynchronous loading, zTree implements a set of Tree plug-ins that can complete most common functions, interested friends can refer to it

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

• Support one-time static generation and Ajax asynchronous loading

• Supports multiple event responses and feedback

• Supports tree node movement, editing, and deletion

• ##Supports arbitrary skin change/personalized icon (relying on css)

• Support extremely flexible checkbox or radio selection function

• Simple parameter configuration realizes flexible and changeable functions

Asynchronous loading

This means: When a tree node is clicked to expand, the background action is requested to return the child node data of the clicked node and loaded. 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, it will request The action specified by the url obtains the child node data and then binds it 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 to 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;
 }

In this way, 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 is the entire content of this article, I hope it will be useful for everyone’s learning Help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Problem with sharing a component in vue webpack (detailed tutorial)

How to use it in JavaScript Setter and getter methods

About how to use Gojs components in JS components

The above is the detailed content of About Jquery zTree tree control asynchronous loading operation. For more information, please follow other related articles on the PHP Chinese website!