JSTree - wyłącz zaznaczenie w węźle nadrzędnym, ale zezwól na rozwinięcie po kliknięciu

Question

Próbuję świetnego JSTree 3.0.2. Mam drzewo z jednym poziomem węzłów potomnych. Po kliknięciu węzła nadrzędnego chcę go rozwinąć, ale nie chcę, aby węzeł nadrzędny był możliwy do wybrania - należy wybrać tylko węzły podrzędne.

mogę węzły nadrzędne otworzyć za pomocą kliknięcia na:

$("#jstree_div").bind("select_node.jstree", function (e, data) { 
return data.instance.toggle_node(data.node); 
}); 

Ale nie mogę dowiedzieć się, jak sprawić, by węzły rodzic nie można wybrać.
Utworzyłem typ i ustawieniu „select_node” false:

"treeParent" : { 
    "hover_node" : true, 
    "select_node" : false 
}  

A potem przydzielony że do węzła nadrzędnego przy użyciu:

data-jstree='{"type":"treeParent"}' 

Ale węzły nadrzędne są nadal wybierane. Utworzyłem jsfiddle tutaj: http://jsfiddle.net/john_otoole/RY7n6/7/ W tym przykładzie używam następujące pokazać, czy coś jest do wyboru:

$('#jstree_div').on("changed.jstree", function (e, data) { 
    $("#selected_element_div").text("Selected built-in: " + data.selected); 
}); 

Wszelkie pomysły, w jaki sposób zablokować możliwość wyboru węzła nadrzędnego?

Answer 1

Wiem, że jest późno na przyjęciu, ale miałem ten sam problem.

Tak właśnie się obejść - może to pomoże komuś, kto ma ten problem.

$('#divCCSS').on('select_node.jstree', function (e, data) { 
      if (data.node.children.length > 0) { 
       $('#divCCSS').jstree(true).deselect_node(data.node);      
       $('#divCCSS').jstree(true).toggle_node(data.node);      
      } 
     }) 

Zasadniczo, odznacz węzeł zaraz po tym, jak został wybrany, jeśli ma dzieci, a następnie rozwiń go.

Answer 2

Ponad bardzo późno do partii, ale przy użyciu jsTree 3.0.4, dekorowanie węzeł główny tak:

<li data-jstree='{ "opened" : true, "disabled" : true }'> 

otwiera korzeń przy wywołaniu i wyłącza kliknięcie. Mam nadzieję, że to pomoże.

<div id="js_tree_container"> 
    <ul> 
     <li data-jstree='{ "opened" : true, "disabled" : true }'> 
      <a href="javascript:void(0);" tite="Root Category"> 
       ROOT NODE 
      </a> 
      <ul> 
       <li> 
        <a href="javascript:void(0);"> 
         <span>Child One</span> 
        </a> 
        <ul> 
         <li> 
          <a href="javascript:void(0);"> 
           <span>Child A</span> 
          </a> 
         </li> 
         <li> 
          <a href="javascript:void(0);"> 
           <span>Child B</span> 
          </a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="javascript:void(0);"> 
         <span>Child Two</span> 
        </a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

<script> 
    $('#js_tree_container').jstree({ 
     'core': { 
      'themes': { 
       'name': 'default', 
       'responsive': true 
      }, 
      'check_callback': true 
     } 
    }).bind("select_node.jstree", function (e, data) { 
     var href = data.node.a_attr.href; 
     document.location.href = href; 
    }); 
</script> 

Answer 3

miałem inny problem, aby zapobiec zdarzenie select_node.jstree dla elementów niepełnosprawnych, ale myślę, że może pracować dla swojej sprawy.

Rozwiązałem mój problem za pomocą wtyczki "conditionalselect".

$('#jstree').jstree({ 
    'conditionalselect' : function (node) { 
    // Check node and call some method 
    return (node['someProperty']) ? true : false; 
    }, 
    'plugins' : ['conditionalselect'], 
    'core' : { 
    <core options> 
    } 
}); 

Możesz sprawdzić węzeł po kliknięciu i wyzwalaczu, aby rozwinąć logikę zwijania. Można również sprawdzić ten wpis: prevent jsTree node select