jQuery Tree 插件提供了一個名為 update
的方法,用于處理節點數據更新通知。當你需要更新樹形結構中的節點數據時,可以使用此方法。以下是一個簡單的示例:
<!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</li>
<li>Node 2</li>
</ul>
<button id="updateBtn">Update Node 1</button>
<script src="main.js"></script>
</body>
</html>
main.js
文件中初始化 jQuery Tree,并為更新按鈕添加點擊事件處理程序:$(document).ready(function () {
$("#tree").tree({
data: [
{
label: "Node 1",
id: "node1",
children: [
{
label: "Node 1.1",
id: "node1_1"
}
]
},
{
label: "Node 2",
id: "node2"
}
]
});
$("#updateBtn").click(function () {
updateNode1();
});
});
updateNode1
函數,用于更新節點數據:function updateNode1() {
// 獲取要更新的節點
var node1 = $("#tree").tree("getNode", "node1");
// 更新節點的標簽和子節點
node1.label = "Updated Node 1";
node1.children = [
{
label: "Updated Node 1.1",
id: "node1_1"
}
];
// 使用 update 方法通知插件更新節點數據
$("#tree").tree("update", node1);
}
現在,當你點擊 “Update Node 1” 按鈕時,Node 1 的標簽和子節點將被更新。你可以根據需要修改 updateNode1
函數來實現其他類型的節點數據更新。