我正在使用jsTree。我想将子节点选择限制为 4 个（要么不允许用户选择超过 4 个节点，要么禁用所有复选框）。我正在使用不起作用的选择限制。我怎样才能实现这个目标？
$("#mytree").jstree({
"plugins" : [ "themes","html_data", "ui", "crrm","checkbox" ],
"html_data" : {
// ...
},
"checkbox": {
"keep_selected_style": false
},
"ui": {
"select_limit": 4,
},
// ...
});
我自己也遇到了这个问题。
如果您使用 jsTree v3+，“UI”插件不再存在，“select_limit”属性也不再存在。 这是当前可用插件的列表。
如果您只想一次选择一个选项，核心模块有一个“multiple”属性，您可以根据需要将其设置为 true/false。但如果你想将其限制为四个选择，那么作者建议使用“条件选择”插件。
我有同样的需求，并且我能够通过一些java脚本找到解决方案。 我想检查 3 个节点的限制，所以我这样做了:
$('#jstree')
// listen for event
.on('changed.jstree', function (e, data) {
var i, j, r = [];
var lenght = data.selected.length;
for(i = 0, j = data.selected.length; i < j; i++) {
if(data.instance.get_node(data.selected[i]).type.localeCompare("child") != 0) {
lenght -= 1;
}
}
if(lenght > 3) {
if(data.instance.get_node(data.selected[data.selected.length-1]).type.localeCompare("child") == 0) {
$("#jstree").jstree("uncheck_node", data.instance.get_node(data.selected[data.selected.length-1]).id);
} else {
$("#jstree").jstree("uncheck_node", data.instance.get_node(data.selected[data.selected.length-2]).id);
}
}
})
// create the instance
.jstree({
'core' :
...
按照常规方法，您可以按如下方式完成此任务
var children = document.getElementById("mytree").children;
var limit = 4;
for (var i = 0; i < limit; ++i)
{
if (!children[i]) return;
children[i].classList.add("off");
}
不是要死后发布旧线程，但我最近收到客户的请求，要求限制基于 jsTree 的元素的最大选择数量，并提出了以下解决方案：
$(document).ready(function () {
var maxSelections = 3;
$('#maxSelections').on("input", function() {
maxSelections = $(this).val();
});
$('#tree').jstree({
'core': {
'data': [
{ "text": "Node 1" },
{ "text": "Node 2" },
{ "text": "Node 3" },
{ "text": "Node 4" },
{ "text": "Node 5" },
{ "text": "Node 6" },
{ "text": "Node 7" },
{ "text": "Node 8" },
{ "text": "Node 9" },
{ "text": "Node 10" }
// Add more nodes as needed
]
},
'plugins' : [ 'checkbox' ],
'checkbox' : {
'keep_selected_style' : false,
'three_state' : true,
'cascade' : 'up'
},
}).on('changed.jstree', function (e, data) {
// Check if the maximum limit has been reached
if (data.selected.length > maxSelections) {
// Deselect excess nodes
var excessNodes = data.selected.slice(maxSelections);
$('#tree').jstree('deselect_node', excessNodes);
alert('Maximum number of selections reached!');
}
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsTree Selection Limit</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css" />
</head>
<body>
Max Selections: <input type="number" value="3" min=1 max=10 id="maxSelections" />
<div id="tree"></div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"></script>
</body>
</html>