Jquery zTree 트리 제어 비동기 로딩 작업_jquery

zTree는 JQuery의 핵심 코드를 사용하여 가장 일반적인 기능을 완료할 수 있는 Tree 플러그인 세트를 구현합니다

• IE, FireFox, Chrome 및 기타 브라우저와 호환
• 한 페이지에 여러 개의 Tree 인스턴스를 동시에 생성 가능
• JSON 데이터 지원
• 일회성 정적 생성 및 Ajax 비동기 로딩을 두 가지 방식으로 지원
• 다양한 이벤트 응답 및 피드백 지원
• 트리 노드 이동, 편집, 삭제 지원
• 모든 스킨 변경/개인화 아이콘 지원(CSS 기반)
• 매우 유연한 체크박스 또는 라디오 선택 기능 지원
• 유연한 기능을 구현하기 위한 간단한 매개변수 구성

비동기 로딩은 트리 노드를 클릭하여 확장할 때 클릭한 노드의 하위 노드 데이터를 반환하고 로드하는 백그라운드 작업을 요청하는 것을 의미합니다.

여기에서는 주로 ztree 설정 변수의 비동기 속성 설정을 설계합니다.

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

트리 노드를 클릭하여 확장하면 URL에 지정된 작업이 요청되어 하위 노드 데이터를 얻은 다음 ztree에 바인딩됩니다.

여기서 백그라운드 작업은 JSON 문자열을 반환하고 ztree는 새 노드 데이터를 바인딩할 때 배열만 수신하므로 문자열을 배열로 변환하기 위해 바인딩하기 전에 필터 기능을 사용하여 데이터 정리 및 변환 작업을 수행해야 합니다.

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

ztree 트리 노드를 클릭하여 확장하면 하위 노드 데이터를 얻고 바인딩하기 위한 작업이 요청됩니다.

다음은 백그라운드 액션 구현입니다.

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>
 

위 내용은 Jquery zTree 트리 제어의 비동기 로딩 작업을 구현하는 세부 단계입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.