웹 프론트엔드 JS 튜토리얼 Jquery zTree 트리 제어 비동기 로딩 작업_jquery

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

May 16, 2016 pm 03:13 PM
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 트리 제어의 비동기 로딩 작업을 구현하는 세부 단계입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까?

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

jQuery를 사용하여 모든 태그의 텍스트 내용 수정

HTML을 읽는 방법 HTML을 읽는 방법 Apr 05, 2024 am 08:36 AM

HTML을 읽는 방법

C# 위임이란 무엇이며 어떤 문제를 해결합니까? C# 위임이란 무엇이며 어떤 문제를 해결합니까? Apr 04, 2024 pm 12:42 PM

C# 위임이란 무엇이며 어떤 문제를 해결합니까?

jQuery에서 eq의 역할 및 적용 시나리오 이해 jQuery에서 eq의 역할 및 적용 시나리오 이해 Feb 28, 2024 pm 01:15 PM

jQuery에서 eq의 역할 및 적용 시나리오 이해

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? Feb 29, 2024 am 09:03 AM

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요?

WordPress에서 페이지 리디렉션을 방지하는 방법은 무엇입니까? WordPress에서 페이지 리디렉션을 방지하는 방법은 무엇입니까? Mar 05, 2024 am 09:33 AM

WordPress에서 페이지 리디렉션을 방지하는 방법은 무엇입니까?

See all articles