main
HuangHai 3 weeks ago
parent eff107ee26
commit ae42a7febd

@ -177,20 +177,34 @@ async def get_tree_data():
FROM knowledge_points
ORDER BY parent_id, id
""")
result = await cur.fetchall()
rows = await cur.fetchall()
data = [{
"id": row[0],
"name": row[1], # 确保包含name字段
"title": row[1],
"parent_id": row[2] if row[2] is not None else 0,
"isParent": not row[3],
"prerequisite": row[4],
"related": row[5],
"open": True
} for row in result]
# 构建节点映射
nodes = {}
for row in rows:
nodes[row[0]] = {
"id": row[0],
"title": row[1],
"parent_id": row[2] if row[2] is not None else 0,
"isParent": not row[3],
"prerequisite": row[4],
"related": row[5],
"open": True
}
return {"code": 0, "data": data}
# 构建树形结构
tree_data = []
for node_id, node in nodes.items():
parent_id = node["parent_id"]
if parent_id == 0:
tree_data.append(node)
else:
if parent_id in nodes:
if "children" not in nodes[parent_id]:
nodes[parent_id]["children"] = []
nodes[parent_id]["children"].append(node)
return {"code": 0, "data": tree_data}
except Exception as e:
return {"code": 1, "msg": str(e)}

@ -3,91 +3,126 @@
<head>
<meta charset="UTF-8">
<title>知识点树形展示</title>
<link rel="stylesheet" href="/static/zTree/css/zTreeStyle/zTreeStyle.css">
<script src="/static/zTree/js/jquery-1.4.4.min.js"></script>
<script src="/static/zTree/js/jquery.ztree.core.min.js"></script>
<script src="/static/zTree/js/jquery.ztree.exedit.min.js"></script>
<script src="/static/zTree/js/jquery.ztree.exhide.min.js"></script>
<style>
body { margin:0; padding:0; font-family:Microsoft YaHei; }
.ztree li span { font-size:14px; }
.ztreeDemoBackground { margin:10px; }
#treeTable { width:100%; border-collapse:collapse; }
#treeTable th, #treeTable td { padding:8px; border:1px solid #ddd; }
#treeTable th { background:#f5f5f5; }
.level-0 td:first-child { padding-left:10px; }
.level-1 td:first-child { padding-left:30px; }
.level-2 td:first-child { padding-left:50px; }
.level-3 td:first-child { padding-left:70px; }
body {
margin: 0;
padding: 0;
font-family: Microsoft YaHei;
}
#treeTable {
width: 100%;
border-collapse: collapse;
}
#treeTable th, #treeTable td {
padding: 8px;
border: 1px solid #ddd;
}
#treeTable th {
background: #f5f5f5;
}
.level-0 td:first-child {
padding-left: 10px;
}
.level-1 td:first-child {
padding-left: 30px;
}
.level-2 td:first-child {
padding-left: 50px;
}
.level-3 td:first-child {
padding-left: 70px;
}
.toggle-icon {
cursor: pointer;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="ztreeDemoBackground">
<table id="treeTable" class="ztree" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>知识点</th>
<th>先修知识</th>
<th>相关知识</th>
</tr>
</thead>
<tbody id="treeBody"></tbody>
</table>
</div>
<table id="treeTable">
<thead>
<tr>
<th>知识点</th>
<th>先修知识</th>
<th>相关知识</th>
</tr>
</thead>
<tbody id="treeBody"></tbody>
</table>
<script src="/static/zTree/js/jquery-1.4.4.min.js"></script>
<script>
var setting = {
view: {
showLine: true,
showTitle: false,
fontCss: function(treeId, treeNode) {
return treeNode.isParent ? {'font-weight':'bold'} : {};
}
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parent_id",
rootPId: 0
var treeData = [];
function toggleNode(nodeId) {
var node = findNodeById(treeData, nodeId);
if (node) {
node.open = !node.open;
updateTable();
}
},
callback: {
onClick: function(event, treeId, treeNode) {
// 点击事件处理
}
function findNodeById(nodes, id) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].id == id) return nodes[i];
if (nodes[i].children) {
var found = findNodeById(nodes[i].children, id);
if (found) return found;
}
}
return null;
}
};
function buildTreeTable(treeNodes, level) {
level = level || 0;
var html = '';
for (var i = 0; i < treeNodes.length; i++) {
html += '<tr class="level-' + level + '"><td>' + treeNodes[i].title + '</td>';
html += '<td>' + (treeNodes[i].prerequisite || '无') + '</td>';
html += '<td>' + (treeNodes[i].related || '无') + '</td></tr>';
if (treeNodes[i].children && treeNodes[i].children.length > 0) {
html += buildTreeTable(treeNodes[i].children, level + 1);
function updateTable() {
var html = '';
function buildRows(nodes, level) {
level = level || 0;
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
html += '<tr class="level-' + level + '">';
html += '<td style="padding-left:' + (level * 20) + 'px">';
if (node.children && node.children.length > 0) {
html += '<span class="toggle-icon" onclick="toggleNode(' + node.id + ')">' +
(node.open ? '▼' : '▶') + '</span>';
} else {
html += '<span style="display:inline-block; width:16px;"></span>';
}
html += node.title + '</td>';
html += '<td>' + (node.prerequisite || '无') + '</td>';
html += '<td>' + (node.related || '无') + '</td>';
html += '</tr>';
if (node.open && node.children && node.children.length > 0) {
buildRows(node.children, level + 1);
}
}
}
buildRows(treeData);
$("#treeBody").html(html);
}
return html;
}
$(function(){
// 初始化数据
$.ajax({
url: "/api/tree-data",
type: "GET",
success: function(res) {
if(res.code === 0) {
var treeObj = $.fn.zTree.init($("#treeBody"), setting, res.data);
success: function (res) {
if (res.code === 0) {
treeData = res.data;
updateTable();
}
}
});
});
</script>
</body>
</html>

Loading…
Cancel
Save