JSTree select_node 이벤트 및 체크 박스

Question

나는 select_node 이벤트를 사용하여 노드를 확장 (토글)하는 jstree를 사용하므로 못생긴 것처럼 보이고 트리에서 토글 화살표를 제거 했으므로 아무 것도 필요하지 않습니다.

이제 트리 내에서 사용할 체크 박스 플러그인을 추가했지만 플러그인이 활성화되어있을 때 select_node 이벤트가 비활성화되어 있음을 발견했습니다.

추한 토글 화살표를 다시 추가하지 않고 체크 박스 플러그인을 사용하여 내 노드를 어떻게 토글 할 수 있습니까? check/uncheck 이벤트에서이 작업을 수행 할 수 있지만 노드를 확장 할 때마다 확인/선택을 취소하고 싶지는 않습니다.

Answer 1

최신 버전의 jstree에서는 이제 확인란을 선택하거나 노드 제목을 클릭하여 노드를 개별적으로 선택하고 선택할 수 있습니다.

Answer 2

JsTree는 스타일 themes을 제공하므로 직접 정의하고로드 할 수 있습니다. 스프라이트 이미지를 바꾸기 만하면됩니다.

Answer 3

예를 들어 http://www.jstree.com/documentation/checkbox과 같이 예제 트리가 있다고 가정하면 화살표가 제거됩니다. ui 상호 작용을 방해하지 않으면 서 클릭 이벤트에서 확인란 선택 및 분기 토글을 실행할 수 없습니다. 그러나 리프가 아닌 노드는 모델 데이터 (해당 체크 박스는 select-all/deselect-all 기능으로 만 사용됨)을 전달하지 않으므로 체크 박스를 제거하고 클릭 이벤트를 "toggle_node"로 다시 정의 할 수 있습니다. 나머지는 그대로 둡니다.

잎이 아닌 노드의 체크 상자를 제거하고 클릭 이벤트를 생성 할 수 있습니다. 잎을 토글합니다. 그러면 원하는 동작을 수행 할 수 있지만 리프가 아닌 노드의 "모두 선택/모두 선택 취소"기능이 제거됩니다.

샘플 페이지에 아래에 "+"표시가있는 행을 추가하기 만하면됩니다.

 
    $("#demo1").jstree({ 
     "plugins" : [ "themes", "html_data", "checkbox" ] 
    }); 

+ $("#demo1 li").not(".jstree-leaf").each(function() { 
+  $("a ins.jstree-checkbox", this).first().hide(); 
+  $("a", this).first().click(function(event) { 
+   $("#demo1").jstree("toggle_node", "#"+$(this).parent().attr('id')); 
+   event.stopPropagation(); 
+   event.preventDefault(); 
+  }); 
+ });