要使用jQuery Tree處理節點刪除,請遵循以下步驟:
<script src="https://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/jquery-tree/1.0.0/jquery.tree.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tree/1.0.0/jquery.tree.min.js"></script>
<div id="tree"></div>
$(document).ready(function () {
$("#tree").tree({
url: "/your-data-source-url", // 數據源URL,返回樹形結構數據
onClick: function (node) {
if (node.type === "leaf") {
// 若點擊的是葉子節點,則刪除該節點
deleteNode(node);
}
},
});
});
function deleteNode(node) {
// 向服務器發送刪除請求(您需要根據您的數據源URL和節點ID自定義請求)
$.ajax({
url: "/your-data-source-url/delete-node", // 數據源URL,包含刪除節點的方法
type: "POST",
data: {
id: node.id, // 要刪除的節點的ID
},
success: function (response) {
if (response.success) {
// 如果服務器響應成功,則從樹中刪除節點
node.remove();
} else {
// 如果服務器響應失敗,則顯示錯誤消息
alert("刪除失敗: " + response.message);
}
},
error: function () {
// 如果請求失敗,則顯示錯誤消息
alert("請求失敗,請稍后重試");
},
});
}
請注意,您需要根據您的實際情況修改數據源URL以及刪除節點的方法。以上代碼僅提供了一個基本的示例,您可能需要根據您的需求進行調整。