Jstree - 所有Jstree中每次只允许检查一个节点
Jstree - only allow to check one node each time in all the Jstree
我有一个 jstree 填充数据,我只是想限制用户只检查所有 jstree 中的一个节点,当检查另一个节点时取消选中第一个并检查另一个。
Checkbox 属性 multiple to false 不起作用。我的复选框插件配置如下:
'checkbox': {
'whole_node': false,
'tie_selection': false,
'multiple': false,
'three_state': false,
'cascade': 'down'
},
谢谢。
want to limit the user to only check one node in all the jstree and when check another uncheck the first and check the other one.
为了实现您的上述需求,您可以参考以下代码片段。
隐藏根节点的复选框
<style>
.jstree li.jstree-open > a.jstree-anchor > i.jstree-checkbox,
.jstree li.jstree-closed > a.jstree-anchor > i.jstree-checkbox {
display: none;
}
</style>
Html代码
<div id="tree">
<ul>
<li id="pnode_1">
ParentNode 1
<ul>
<li id="child1_1">ChildNode 1</li>
<li id="child1_2">ChildNode 2</li>
</ul>
</li>
<li id="pnode_2">
ParentNode 2
<ul>
<li id="child2_1">ChildNode 1</li>
<li id="child2_2">ChildNode 2</li>
<li id="child2_3">ChildNode 3</li>
</ul>
</li>
</ul>
</div>
JS代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
var Tree = $("#tree").jstree({
'checkbox': {
'whole_node': false,
'tie_selection': false,
'keep_selected_style': false,
'cascade': 'down'
},
"plugins": ["checkbox"]
});
//overwrite default behaviour of check_node function
Tree.on("check_node.jstree", function (e, data) {
var selectedNodes = $("#tree").jstree().get_checked();
console.log(selectedNodes);
console.log(data.node.id);
if (selectedNodes.length > 1) {
$("#tree").jstree().uncheck_node(selectedNodes[0]);
}
});
});
</script>
测试结果
我有一个 jstree 填充数据,我只是想限制用户只检查所有 jstree 中的一个节点,当检查另一个节点时取消选中第一个并检查另一个。
Checkbox 属性 multiple to false 不起作用。我的复选框插件配置如下:
'checkbox': {
'whole_node': false,
'tie_selection': false,
'multiple': false,
'three_state': false,
'cascade': 'down'
},
谢谢。
want to limit the user to only check one node in all the jstree and when check another uncheck the first and check the other one.
为了实现您的上述需求,您可以参考以下代码片段。
隐藏根节点的复选框
<style>
.jstree li.jstree-open > a.jstree-anchor > i.jstree-checkbox,
.jstree li.jstree-closed > a.jstree-anchor > i.jstree-checkbox {
display: none;
}
</style>
Html代码
<div id="tree">
<ul>
<li id="pnode_1">
ParentNode 1
<ul>
<li id="child1_1">ChildNode 1</li>
<li id="child1_2">ChildNode 2</li>
</ul>
</li>
<li id="pnode_2">
ParentNode 2
<ul>
<li id="child2_1">ChildNode 1</li>
<li id="child2_2">ChildNode 2</li>
<li id="child2_3">ChildNode 3</li>
</ul>
</li>
</ul>
</div>
JS代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
$(function () {
var Tree = $("#tree").jstree({
'checkbox': {
'whole_node': false,
'tie_selection': false,
'keep_selected_style': false,
'cascade': 'down'
},
"plugins": ["checkbox"]
});
//overwrite default behaviour of check_node function
Tree.on("check_node.jstree", function (e, data) {
var selectedNodes = $("#tree").jstree().get_checked();
console.log(selectedNodes);
console.log(data.node.id);
if (selectedNodes.length > 1) {
$("#tree").jstree().uncheck_node(selectedNodes[0]);
}
});
});
</script>
测试结果