要在jQuery Tree中實現節點的批量操作,您可以使用以下方法:
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQueryTree/1.0.0/jquery.tree.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQueryTree/1.0.0/jquery.tree.min.js"></script>
<div id="tree"></div>
$(function() {
$("#tree").tree({
url: "your-data-source-url", // 數據源URL,返回JSON格式的樹形結構數據
onClick: function(node) {
// 點擊樹節點時的操作
},
onDblClick: function(node) {
// 雙擊樹節點時的操作
}
});
});
function batchOperations(operation, nodes) {
switch (operation) {
case "add":
addNodes(nodes);
break;
case "remove":
removeNodes(nodes);
break;
case "update":
updateNodes(nodes);
break;
default:
console.log("Invalid operation");
}
}
function addNodes(nodes) {
$("#tree").tree("append", {
parent: nodes[0].id, // 要添加子節點的父節點ID
data: nodes.map(function(node) {
return node.label; // 子節點數據,可以是字符串或對象
})
});
}
function removeNodes(nodes) {
nodes.forEach(function(node) {
$("#tree").tree("remove", node.id);
});
}
function updateNodes(nodes) {
nodes.forEach(function(node) {
$("#tree").tree("update", node.id, node.label); // 假設服務器返回的數據中有label字段用于更新節點文本
});
}
batchOperations
函數進行節點批量操作:// 示例:添加節點
var nodesToAdd = [
{ id: "parent1", label: "Parent 1" },
{ id: "child1", label: "Child 1" },
{ id: "child2", label: "Child 2" }
];
batchOperations("add", nodesToAdd);
// 示例:刪除節點
var nodesToRemove = [
{ id: "node1" },
{ id: "node2" }
];
batchOperations("remove", nodesToRemove);
// 示例:更新節點
var nodesToUpdate = [
{ id: "node3", label: "Updated Node 3" }
];
batchOperations("update", nodesToUpdate);
這樣,您就可以根據需求實現節點的批量添加、刪除和更新操作。