JSTree - 禁用父節點上的選擇，但允許點擊擴展

我正在嘗試出色的JSTree 3.0.2。我有一個有一層子節點的樹。當單擊父節點時，我希望它展開，但我不希望父節點可以選擇 - 只有子節點應該是可選的。JSTree - 禁用父節點上的選擇，但允許點擊擴展

我可以得到父節點使用上點擊打開：

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

但我無法弄清楚如何使父節點不可選擇。
我創建了一個類型，並設置了「select_node」爲false：

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

然後對父節點使用分配：

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

但父節點仍然選擇。我創建了這裏的jsfiddle： http://jsfiddle.net/john_otoole/RY7n6/7/ 在該示例中，我使用下面顯示的東西是否可選：

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

如何防止父節點的選擇任何想法？

來源

2014-06-29 JohnOT

這可能是對你有所幫助：https://groups.google.com/forum/#!topic/jstree/Av0gRAVr1TM –

我檢查了鏈接，但無法得到它工作 - 也許這種語法不適用於JSTree 3.0.2。最後，我決定允許父節點可選，我將解決它。 – JohnOT

我知道這裏晚了，但我有同樣的問題。

這就是我如何解決它 - 也許它會幫助有這個問題的其他人。

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

基本上，取消選擇節點後，如果它已經被選中，如果它有孩子，然後展開它。

來源

2014-08-21 22:13:41 Kirbos

您的時機非常完美，謝謝;-) –

感謝您的技巧，我建議在回調中使用'data.instance'而不是$（'＃divCCSS'）。jstree（true）' –

不是非常遲到了更多，但使用jsTree 3.0.4，裝飾根節點像這樣：

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

調用和禁用點擊打開時的根。希望能幫助到你。

<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>

來源

2017-01-25 15:13:26 RickL

謝謝後續處理！ – bwmartens

我有不同的問題，以防止禁用item的select_node.jstree事件，但我認爲它可以爲你的情況。

我用'conditionalselect'插件解決了我的問題。

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

您可以在點擊時檢查節點並觸發某些展開摺疊邏輯。您還可以檢查這個帖子：prevent jsTree node select

來源

2017-06-07 11:57:58

JSTree - 禁用父節點上的選擇，但允許點擊擴展

回答

相關問題