jstree html 예제
당신이 원하는 경우에 당신은 항상 jstree의 개발을 돕기 위해 작은 금액을 기부 할 수 있습니다. _함수에 “url”을 설정할 수도 있으며 “데이터”와 똑같이 작동합니다 – 요청이 이루어질 때마다 jstree는 함수를 호출하고 요청은이 함수에서 반환하는 대로 꺼집니다. 이 기능은 다음과 같은 URL을 다룰 때 유용합니다 : http://example.com/get_children/1._ jstree 객체에 데이터 키와 json Data (jsonTreeData)를 추가했습니다. 지금은 jstree core.data 키에서 지정한 데이터를 구문 분석하여 트리를 만드는 데 사용한다는 점에 유의해야 합니다. 이전 예제에서 볼 수 있듯이 이 키가 누락된 경우 jstree는 컨테이너의 인라인 HTML을 구문 분석하려고 시도합니다. 내부적으로 jstree는 텍스트를 링크로 변환하므로 태그 jstree에 링크가 이미 있는 경우 는 신경 쓰지 않습니다. 그러나 자식 노드 2.를 클릭하면 사용자를 새 페이지로 연결하지 않고 변경된.jstree 이벤트를 가로채서 그에 따라 행동합니다. 다음으로 트리가 표시될 div를 선택해야 합니다. 우리는 그것을 위해 jquery 선택기사용합니다. 선택한 요소에서 jstree()라고 부르고 필요한 값을 전달해야 합니다.
인스턴스가 준비되면 인스턴스에서 메서드를 호출할 수 있습니다. API 설명서에는 사용 가능한 메서드 목록이 있습니다. 아래의 세 가지 예는 정확히 같은 일을 당신이 jstree 자신을 호스팅하기로 결정하는 경우 – 파일은 dist 폴더에 있습니다. dist/libs 폴더를 무시해도 됩니다. 이전의 간단한 HTML 예제와 달리 이번에는 .jstree() 함수가 구성 개체를 허용합니다.
- 래핑하고 해당 컨테이너에 인스턴스를 만드는 컨테이너가 있어야 합니다. 그래서:$(`#html1`).jstree();. jquery 스크립트에서 사용하는 방법과 유사한 바인딩()을 사용하여 이 작업을 수행합니다. 우리가 염려하는 이벤트는 “select_node.jstree”입니다.
따라서 바인드() 함수는 다음과 같습니다: /에코/json/JSONP: /jsfiddle.net/echo/jsonp/ 에코/html/XML: /에코/html/XML: /에코/xml/ 모든 jstree 이벤트는 특수 “.jstree” 네임스페이스에서 발생합니다. 처리기 자체는 하나의 추가 매개 변수를 수신합니다 – 발생한 이벤트에 대해 알아야 할 모든 것으로 채워집니다. 이 경우 data.selected는 선택한 노드 아이디의 배열입니다(지정하지 않은 경우 자동으로 생성됩니다). 이제 다른 것에 초점을 맞춥니다. 먼저 데이터 개체의 “데이터” 구성 옵션을 해제합니다. jQuery로 확인하면 문자열 또는 개체로 간주됩니다. 그러나 jstree는 함수를 설정할 수 있습니다. 다음 차이점에 – “자식 노드 1″은 닫힌 것처럼 보입니다 – 즉, 이 노드의 “자식” 속성으로 true를 제공한 데이터(서버 응답에서 볼 수 있음)입니다. 이 특수 값은 jstree로 표시되어 “자식 노드 1” 노드를 지연로드해야 합니다.
