javascript JSTree - 禁用父节点上的选择，但允许单击扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24480791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSTree - disable selection on a parent node, but allow expansion on click
提问by JohnOT
I'm trying out the excellent JSTree 3.0.2. I have a tree with one level of child nodes. When a parent node is clicked I want it to expand, but I don't want the parent node to be selectable - only the child nodes should be selectable.
我正在试用优秀的 JSTree 3.0.2。我有一棵带有一层子节点的树。单击父节点时，我希望它展开，但我不希望父节点可选 - 只有子节点应该是可选的。
I can get the parent nodes to open on click using:
我可以使用以下命令让父节点在单击时打开：
$("#jstree_div").bind("select_node.jstree", function (e, data) {
return data.instance.toggle_node(data.node);
});
But I can't figure out how to make the parent nodes non-selectable.
I've created a type and have set "select_node" to false:
但我无法弄清楚如何使父节点不可选择。
我创建了一个类型并将“select_node”设置为 false：
"treeParent" : {
"hover_node" : true,
"select_node" : false
}
And then assigned that to the parent node using:
然后使用以下命令将其分配给父节点：
data-jstree='{"type":"treeParent"}'
But the parent nodes are still selectable. I've created a jsfiddle here: http://jsfiddle.net/john_otoole/RY7n6/7/In that example I am using the following to show whether something is selectable:
但是父节点仍然是可选的。我在这里创建了一个 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);
});
Any ideas on how to prevent selection of a parent node?
关于如何防止选择父节点的任何想法？
回答by Kirbos
I know this is way late to the party here, but I had this same problem.
我知道这里的聚会已经很晚了，但我遇到了同样的问题。
This is how I got around it -- maybe it will help someone else who is having this 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);
}
})
Basically, deselect the node right after it has been selected if it has children, then expand it.
基本上，如果节点有子节点，则在选择节点后立即取消选择节点，然后展开它。
回答by RickL
More than very late to the party, but using jsTree 3.0.4, decorating the root node like so:
参加聚会已经很晚了，但是使用 jsTree 3.0.4，像这样装饰根节点：
<li data-jstree='{ "opened" : true, "disabled" : true }'>
opens the root when invoked and disables click. Hope it helps.
调用时打开根并禁用单击。希望能帮助到你。
<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>
回答by Kaloyan Stamatov
I had different issue to prevent select_node.jstree event for disabled items, but I think it can work for your case.
我有不同的问题来防止禁用项目的 select_node.jstree 事件，但我认为它可以适用于您的情况。
I solved my problem by using 'conditionalselect' plugin.
我通过使用“conditionalselect”插件解决了我的问题。
$('#jstree').jstree({
'conditionalselect' : function (node) {
// Check node and call some method
return (node['someProperty']) ? true : false;
},
'plugins' : ['conditionalselect'],
'core' : {
<core options>
}
});
You can check the node on click and trigger some expand collapse logic. You can also check this post : prevent jsTree node select
您可以在单击时检查节点并触发一些展开折叠逻辑。您还可以查看此帖子：阻止 jsTree 节点选择
