要使用jQuery Tree插件實現動態加載,您需要遵循以下步驟:
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入jQuery Tree插件 -->
<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>
<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,這里應該是一個返回樹形結構數據的API接口
onClick: function(node) {
// 點擊樹節點時的操作,例如顯示詳細信息
console.log("Node clicked:", node.text);
}
});
});
from flask import Flask, jsonify, request
app = Flask(__name__)
# 模擬數據
data = [
{"id": 1, "parent_id": None, "text": "Node 1"},
{"id": 2, "parent_id": 1, "text": "Node 1.1"},
{"id": 3, "parent_id": 1, "text": "Node 1.2"},
{"id": 4, "parent_id": 2, "text": "Node 1.1.1"},
]
@app.route("/get_tree_data", methods=["GET"])
def get_tree_data():
parent_id = request.args.get("parent_id")
if parent_id is None:
# 獲取所有頂級節點
nodes = [{"id": node["id"], "parent_id": None, "text": node["text"]} for node in data]
else:
# 獲取指定父節點的子節點
parent_node = next((node for node in data if node["id"] == int(parent_id)), None)
if parent_node is None:
return jsonify([])
nodes = [{"id": node["id"], "parent_id": parent_node["id"], "text": node["text"]} for node in data if node["parent_id"] == parent_node["id"]]
return jsonify(nodes)
if __name__ == "__main__":
app.run(debug=True)
現在,當您訪問/get_tree_data?parent_id=null
時,將返回包含所有頂級節點的樹形結構數據。您可以根據需要修改API接口以返回其他級別的節點數據。