jstree checkbox 조작

Question

모든 노드마다 체크 박스가있는 jstree가 있습니다. 나는 다음과 같은 것을 성취하고자한다. 어떤 방법이나 API의 일부가 우리에게 도움이되는지 알려주세요.

1. 부모 노드를 선택하면 어떤 자식 노드도 확인하고 싶지 않습니다. 현재 모든 아이들이 선택됩니다.
2. 자식 노드가 선택되면 부모 노드를 모두 확인하십시오. 현재 상위 노드는 부분적으로 검사됩니다 (정사각형). 부분 선택을 완전히 제거하고 싶습니다. 그것은 jstree 체크 박스의 동작을 완전히 바꾸고 싶습니다.

API 문서를 검색했지만 아무 것도 발견되지 않았습니다.

Answer 1

real_checkboxes 옵션을 살펴보십시오. 다음과 같이하면 시작할 수 있습니다.

자식이 검사 될 때 부모를 확인하도록 바인딩 동작을 변경해야 할 수도 있습니다.

Answer 2

나는 질문과 비슷한 요구 사항을 가지고 있었지만 위의 답변은 @chris 대답을 시도했지만 제안 된 대답은 성공하지 못했습니다. 여기

내가이

.bind('check_node.jstree', function (e, data) { //check all parent nodes 
    //var currentNode = data.rslt.obj.attr("id"); 
     var parentNode = data.rslt.obj.attr("parent_id") 
     $('#demo').jstree('check_node', '#'+parentNode); 
}) 
.bind('uncheck_node.jstree', function (e, data) {//uncheck all child nodes 
    var allChildNodes = data.inst._get_children(data.rslt.obj); 
     allChildNodes.each(function(idx, listItem) { 
      $('#demo').jstree('uncheck_node', '#'+$(listItem).attr("id")); 
     }); 
}) 
.jstree({ 
// List of active plugins 
    "checkbox": { 
     real_checkboxes: true, 
      two_state: true, 
      checked_parent_open: true, 
      override_ui:true 
    }, 
    "plugins" : [ 
     "themes","json_data","ui","cookies","dnd","search","types","hotkeys","contextmenu","crrm", "checkbox" 
    ] 
}) 

Answer 3

작업이 내가 사용하는 것입니다 수 있도록 한 것입니다. 그러나 다른 사람처럼 간결하지 작동합니다 JSTree 버전 여기에 3.1.1로

$('#jstree').jstree({ 
    "plugins" : ["checkbox"], 
    "checkbox": { 
    "three_state": false 
    } 
}).on("select_node.jstree", function (e, data) { 
    var selectedNode; 
    if (data.selected.length == 1) { 
    lastSelected = data.selected.slice(0); 
    selectedNode = data.selected[0]; 
    } else { 
    // Get the difference between lastselection and current selection 
    selectedNode = $.grep(data.selected, function(x) {return $.inArray(x, lastSelected) < 0}); 
    lastSelected = data.selected.slice(0); // trick to copy array 
    } 
    // Select the parent 
    var parent = data.instance.get_node(selectedNode).parent; 
    data.instance.select_node(parent); 
}).on("deselect_node.jstree", function (e, data) { 
    // Get the difference between lastselection and current selection 
    var deselectedNode = $.grep(lastSelected,function(x) {return $.inArray(x, data.selected) < 0}) 
    , children = data.instance.get_children_dom(deselectedNode); 
    if (children.length) { 
    children.each(function(i, a) { 
     data.instance.deselect_node(a); 
     lastSelected = data.selected.slice(0); 
    }); 
    } else { 
    lastSelected = data.selected.slice(0); 
    } 
}); 

Answer 4

것은 내가 할 것 인 것이다 : 마법은 여기에 발생하는 것을

$('#data').jstree({ 
    'core' : { 
     'data' : [ 
      { "text" : "Root node", "children" : [ 
        { "text" : "Child node 1" }, 
        { "text" : "Child node 2" } 
      ]}, 
      { "text" : "Root node 2", "children" : [ 
        { "text" : "Child node 1" }, 
      ]} 
     ] 
    }, 
    'checkbox': { 
     three_state: false, 
     cascade: 'up' 
    }, 
    'plugins': ["checkbox"] 
}); 

JSFiddle Demo

주 체크 박스의 파라미터 문서에서

:

three_state : 체크 박스가 을 아래로 계단식 및 확인되지 않은 상태를해야하는 경우를 나타내는 boolean. 기본값은 true입니다.

---

폭포 : 계단식 및 결정되지 않은 노드 이 적용되는 방식이 설정을 제어합니다. 'up'이 문자열에있는 경우 - 계단식 배열이 활성화되어 있습니다. 'down'이 문자열에있는 경우 - 계단식 아래쪽이 활성화되어 있고 'undetermined'인 경우 이 문자열에 있습니다 - 미정의 노드가 사용됩니다. three_state 이 true으로 설정된 경우이 설정은 자동으로 'up + down + undetermined'로 설정됩니다. 기본값은 ''입니다.

이 문서

은 v.3.1.1

편집 난 그냥 확인 V3.3에 대한 소스 코드 내부에 발견되었다.0, 그리고 이러한 특성에 대한 설명서가 변경되었지만 (내 의견으로는 악화 될 경우) code works just the same. 그 사이에 이러한 속성은 API에 나열되어 있지만 three_state과 cascade 인 것처럼 보입니다.이 글을 쓰는 시점에서 소스 코드보다 더 나은 문서가있는 것 같습니다.

부모 아래에 여러 개의 하위 노드가있는 경우 하위 중 하나만 선택하면 이 아니며 부모를 확인합니다. 부모에게 적용하려면 모든 노드를 검사해야합니다.

희망이 도움이됩니다.