-
Notifications
You must be signed in to change notification settings - Fork 0
/
treeview.js
149 lines (139 loc) · 3.34 KB
/
treeview.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
// 根据json生成treeview
var input_data = {
"学校常识": {
"体育常识":{
"三级跳":"https://www.zhihu.com/question/420386951"
}
},
"生活常识": {
"烧饭类":"#life",
"个人卫生":"#grws"
},
"小区常识":{
"配电箱的作用":"https://www.zhihu.com/question/348467781"
},
"道路常识":
{
},
"城市常识":
{
"治安类":{
"治安":"#zhian",
"社会治安综合治理知识科普":"https://m.thepaper.cn/newsDetail_forward_20645012",
"警种分类":"https://baike.baidu.com/item/%E8%AD%A6%E7%A7%8D/630673"
}
},
"医学常识":
{
"日常医学常识网":"https://publicwebdb.github.io/Daily-Medical-Knowledge-Network/",
"中国心理学协会":"https://www.cpsbeijing.org/"
},
"化学常识":
{
"化学常识":"#hxcs"
},
"农业常识":
{
"酿酒":"https://www.zhihu.com/question/435633996"
},
"中介代理行业":
{
"拍卖常识":"https://zhidao.baidu.com/question/657090974595753605.html",
},
"餐饮常识":
{
"饮食常识":"#yscs",
"做饭常识":"#zfcs"
},
"银行常识":
{
"硬币常识":"#coin"
},
"化学常识":
{
"化学常识":"#hxcs"
},
"建筑安全系统常识":
{
"index1":"#building-safe-system"
},
"能量转换仪器常识":
{
"index":"#index"
},
"共青团常识":
{
"主标题":"#gctcs"
},
"玩转QQ":
{
"index":"#playQQ"
},
"仪器常识":{
"医用类":"#doctorInstrument",
"安全检测类":"#safeDetect"
},
"建筑常识":
{
"楼房":"#loufang"
},
"结婚与爱情常识":
{
"爱情":"#love"
},
"餐饮百科常识":
{
"必胜客":"#bsk"
},
"规划局常识":
{
"城中村":"https://baike.baidu.com/item/%E5%9F%8E%E4%B8%AD%E6%9D%91/4172812?fr=ge_ala"
},
"江阴本地常识":
{
"江阴市政府":"#jyszf"
}
};
function generateTreeview(data, parentElement) {
for (var key in data) {
var value = data[key];
// 创建父节点
var parentNode = document.createElement("li");
parentElement.appendChild(parentNode);
// 创建展开/折叠图标
var caretNode = document.createElement("span");
caretNode.classList.add("caret");
caretNode.textContent = key;
parentNode.appendChild(caretNode);
// 创建子节点
var nestedNode = document.createElement("ul");
nestedNode.classList.add("nested");
parentNode.appendChild(nestedNode);
// 若子节点为对象,则递归生成子树
if (typeof value === "object") {
generateTreeview(value, nestedNode);
} else {
// 创建子节点文本
var childNode = document.createElement("li");
var li_link = document.createElement("a")
li_link.href = value
li_link.innerText = value
childNode.append(li_link)
// childNode.textContent = value;
nestedNode.appendChild(childNode);
}
}
}
// 获取根节点元素
var rootElement = document.getElementById("myUL");
// 生成树形视图
generateTreeview(input_data, rootElement);
// 折叠
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}