jstree 예제

augusztus 2, 2019 6:37 du. Közzétette cccccccccccccc

json 데이터와 함께 jsTree에 대해 논의 할 것입니다. JSON은 프런트 엔드 와 백 엔드 응용 프로그램 간에 데이터를 교환하는 매우 일반적인 형식입니다. 우리는 config 개체를 전달하는 것을 제외하고 이전과 동일한 .jstree() 메서드를 사용합니다. JSON 데이터를 core.data 키로 전달하고 트리를 만드는 데 사용합니다. jsTree core.data 키에 지정 한 모든 데이터를 구문 분석 하 고 이 데이터를 사용 하 여 트리를 만듭니다., 이 키가 누락 된 경우 jsTree 컨테이너의 인라인 HTML을 구문 분석 하려고 합니다. 플러그인을 만들 때 여기에서 볼 수 있듯이 기본 구성을 정의하거나 jstree에 자신의 함수를 추가하거나 재정의 된 함수를 호출하는 기능을 유지하면서 기존 함수를 재정의 할 수 있습니다. 우리는 이전 예제에서 나무와 상호 작용에 표면을 긁었다. DOM이 준비되면 jstree 인스턴스를 만들 수 있습니다. 모든 jstree 이벤트는 특별한 “.jstree”네임 스페이스에서 발생합니다 – 이것이 우리가 “changed.jstree”를 듣는 이유입니다. 처리기 자체는 하나의 추가 매개 변수를 수신합니다 – 발생한 이벤트에 대해 알아야 할 모든 것으로 채워집니다. 이 경우 data.selected는 선택한 노드 아이디의 배열입니다(지정하지 않은 경우 자동으로 생성됩니다). html 페이지의 이름을 try_jstree.html로 지정해 보겠습니다.

처음에 페이지는: 위의 예제는 jstree 인스턴스에 대 한 참조를 가져오는 방법을 보여 주며 (다시 선택기로, 하지만 이번에는 구성 대신, 우리는 부울 true를 전달), 그리고 몇 가지 메서드를 호출-후자의 ID에 의해 노드를 선택 하는. 이 노드를 계속 열고 – 로드되는 노드에 ID가 2가 http://www.jstree.com/fiddle?lazy&id=2 때문에 id가 2로 설정되어 있고 AJAX 요청(데이터 함수)과 함께 노드 ID를 보내도록 jstree를 구성했기 http://www.jstree.com/fiddle?lazy&id=2 다음 요청이 꺼집니다. 여기서는 이전 예제를 통해 “자식 노드 1” 노드를 지연로드합니다. 노드를 처음에 선택하려면 요소에서 jstree 클릭 클래스를 설정할 수 있습니다. 첫 번째 요청은 http://www.jstree.com/fiddle?lazy&id=# #은 jstree루트 노드를 로드해야 할 때 함수가 받는 특수 ID입니다. 이제 다른 것에 초점을 맞춥니다. 먼저 데이터 개체의 “데이터” 구성 옵션을 해제합니다. jQuery로 확인하면 문자열 또는 개체로 간주됩니다.

그러나 jstree는 함수를 설정할 수 있습니다. 저장하려는 정보의 이름을 “href”로 지정해 보겠습니다. 이 키의 값을 url로 저장할 수 있습니다(예제에서는 필요합니다). “Gmail”으로 “데이터”를 갖는 개체의 경우 “메타데이터”가 다음 차이점인 “자식 노드 1″이 닫힌 것처럼 보입니다. 이 특수 값은 jstree로 표시되어 “자식 노드 1” 노드를 지연로드해야 합니다. HTML을 사용하여 트리 뷰를 만들 수 있습니다. 이 옵션은 헤더 메뉴와 같은 상수 형식 트리 메뉴에 매우 적합합니다. jsTree 는 트리를 렌더링하는 jstree() 메서드를 제공합니다.

jQuery 선택기를 사용하여 HTML 요소에서 .jstree() 메서드를 호출해야 합니다. $.jstree.create(요소)를 사용할 수도 있습니다. .jstree() 메서드는 jsTree가 선택한 노드 내에서 트리를 렌더링할 것을 알릴 수 있도록 합니다. 아래 코드와 같은 데이터 속성을 사용하여 노드를 렌더링 할 때 몇 가지 옵션을 추가 할 수 있습니다. 그래서 jquery.js를 다운로드하여 html (try_jstree.html) 파일을 포함하는 폴더에 넣었습니다. 그런 다음 jsTree (jquery.jstree.js라는 이름)를 다운로드해야하며 동일한 폴더에 넣습니다.

Kategória: Egyéb

Írta: Gabor

Hozzászólás zárolva.