JSTree - Auswahl auf einem übergeordneten Knoten deaktivieren, aber Erweiterung bei Klick zulassen

Question

Ich probiere das ausgezeichnete JSTree 3.0.2 aus. Ich habe einen Baum mit einer Ebene von Kindknoten. Wenn auf einen übergeordneten Knoten geklickt wird, möchte ich ihn erweitern, aber ich möchte nicht, dass der übergeordnete Knoten auswählbar ist - nur die untergeordneten Knoten sollten auswählbar sein.

kann ich die übergeordneten Knoten erhalten auf Klick öffnen mit:

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

Aber ich kann nicht herausfinden, wie die übergeordneten Knoten nicht wählbar zu machen.
Ich habe eine Art erstellt und festgelegt „select_node“ auf false:

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

Und dann zugewiesen, dass an den übergeordneten Knoten mit:

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

Aber die übergeordneten Knoten sind noch wählbar. Ich habe ein jsfiddle hier erstellt: http://jsfiddle.net/john_otoole/RY7n6/7/ In diesem Beispiel habe ich die folgende bin mit zeigen, ob etwas frei wählbar:

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

Alle Ideen, wie die Auswahl eines übergeordneten Knoten zu verhindern?

Answer 1

Ich weiß, das ist viel zu spät zur Party hier, aber ich hatte das gleiche Problem.

So habe ich es verstanden - vielleicht hilft es jemand anderem, der dieses Problem hat.

$('#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);      
      } 
     }) 

Deaktivieren Sie den Knoten rechts nachdem er ausgewählt wurde, wenn er untergeordnete Elemente hat, und erweitern Sie ihn.

Answer 2

Mehr als sehr spät zur Party, aber unter Verwendung von jsTree 3.0.4, die Dekoration des Wurzelknoten in etwa so:

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

öffnet die Wurzel, wenn sie aufgerufen und deaktiviert klicken. Ich hoffe es hilft.

<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

Ich hatte anderes Problem select_node.jstree Ereignis für deaktivierte Elemente zu verhindern, aber ich denke, es kann für Ihren Fall arbeiten.

Ich löste mein Problem mit dem Plugin 'conditionalselect'.

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

Sie können den Knoten beim Klicken überprüfen und eine erweiterte Minimierungslogik auslösen. Sie können auch diesen Beitrag überprüfen: prevent jsTree node select