main
HuangHai 3 weeks ago
parent eff107ee26
commit ae42a7febd

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

@ -3,91 +3,126 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>知识点树形展示</title> <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> <style>
body { margin:0; padding:0; font-family:Microsoft YaHei; } body {
.ztree li span { font-size:14px; } margin: 0;
.ztreeDemoBackground { margin:10px; } padding: 0;
#treeTable { width:100%; border-collapse:collapse; } font-family: Microsoft YaHei;
#treeTable th, #treeTable td { padding:8px; border:1px solid #ddd; } }
#treeTable th { background:#f5f5f5; }
.level-0 td:first-child { padding-left:10px; } #treeTable {
.level-1 td:first-child { padding-left:30px; } width: 100%;
.level-2 td:first-child { padding-left:50px; } border-collapse: collapse;
.level-3 td:first-child { padding-left:70px; } }
#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> </style>
</head> </head>
<body> <body>
<div> <table id="treeTable">
<ul id="treeDemo" class="ztree"></ul> <thead>
</div> <tr>
<th>知识点</th>
<div class="ztreeDemoBackground"> <th>先修知识</th>
<table id="treeTable" class="ztree" border="1" cellspacing="0" cellpadding="0"> <th>相关知识</th>
<thead> </tr>
<tr> </thead>
<th>知识点</th> <tbody id="treeBody"></tbody>
<th>先修知识</th> </table>
<th>相关知识</th>
</tr>
</thead>
<tbody id="treeBody"></tbody>
</table>
</div>
<script src="/static/zTree/js/jquery-1.4.4.min.js"></script>
<script> <script>
var setting = { var treeData = [];
view: {
showLine: true, function toggleNode(nodeId) {
showTitle: false, var node = findNodeById(treeData, nodeId);
fontCss: function(treeId, treeNode) { if (node) {
return treeNode.isParent ? {'font-weight':'bold'} : {}; node.open = !node.open;
} updateTable();
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parent_id",
rootPId: 0
} }
}, }
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 updateTable() {
function buildTreeTable(treeNodes, level) { var html = '';
level = level || 0;
var html = ''; function buildRows(nodes, level) {
for (var i = 0; i < treeNodes.length; i++) { level = level || 0;
html += '<tr class="level-' + level + '"><td>' + treeNodes[i].title + '</td>'; for (var i = 0; i < nodes.length; i++) {
html += '<td>' + (treeNodes[i].prerequisite || '无') + '</td>'; var node = nodes[i];
html += '<td>' + (treeNodes[i].related || '无') + '</td></tr>'; html += '<tr class="level-' + level + '">';
if (treeNodes[i].children && treeNodes[i].children.length > 0) { html += '<td style="padding-left:' + (level * 20) + 'px">';
html += buildTreeTable(treeNodes[i].children, level + 1); 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({ $.ajax({
url: "/api/tree-data", url: "/api/tree-data",
type: "GET", type: "GET",
success: function(res) { success: function (res) {
if(res.code === 0) { if (res.code === 0) {
var treeObj = $.fn.zTree.init($("#treeBody"), setting, res.data); treeData = res.data;
updateTable();
} }
} }
}); });
});
</script> </script>
</body> </body>
</html> </html>

Loading…
Cancel
Save