집 > 기사 > 웹 프론트엔드 > Jquery zTree 트리 제어 비동기 로딩 작업 정보

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

不言원래의: 2018-06-25 09:47:371892검색

이 기사에서는 주로 Jquery zTree 트리 제어 비동기 로딩 작업을 소개하고, Jquery zTree 비동기 로딩을 배우고, zTree는 가장 일반적인 기능을 완료할 수 있는 Tree 플러그인 세트를 구현하며, 관심 있는 친구들이 참조할 수 있습니다.

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:&#39;子节点3&#39;}];这样的格式 
 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>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

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

관련 기사