在 jQuery Tree 中,處理節點刪除確認可以通過以下幾個步驟實現:
以下是一個簡單的示例:
首先,確保已經在頁面中引入了 jQuery 和 jQuery Tree 的相關庫文件。然后,創建一個樹形結構:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Tree Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tree/1.0.0/jquery.tree.min.js"></script>
</head>
<body>
<ul id="tree">
<li>Node 1
<ul>
<li>Node 1.1</li>
<li>Node 1.2</li>
</ul>
</li>
<li>Node 2</li>
</ul>
<button id="deleteBtn">Delete Node 1.1</button>
<script>
$(function() {
$("#tree").tree({
onClick: function(node) {
if (node.children.length === 0) {
$("#deleteBtn").attr("data-id", node.text);
}
}
});
$("#deleteBtn").click(function() {
var nodeId = $(this).data("id");
if (confirm("Are you sure you want to delete this node?")) {
// 在這里執行刪除節點的操作
console.log("Deleted node:", nodeId);
}
});
});
</script>
</body>
</html>
在這個示例中,我們首先創建了一個簡單的樹形結構。然后,為刪除按鈕添加了一個點擊事件監聽器。當用戶點擊刪除按鈕時,會彈出一個確認對話框。如果用戶確認刪除節點,我們可以在這里執行刪除節點的操作。