阅读量:0
jQuery Tree 插件提供了一个名为 update 的方法，用于处理节点数据更新通知。当你需要更新树形结构中的节点数据时，可以使用此方法。以下是一个简单的示例：
- 首先，确保已经在 HTML 文件中引入了 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</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 函数来实现其他类型的节点数据更新。
