jstree 예제

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로 확인하면 문자열 또는 개체로 간주됩니다.