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 - 禁用父节点上的选择，但允许点击扩展

回答

相关问题