本文實例為大家分享了jQuery treeview樹形結構的應用代碼，供大家參考，具體內容如下
繼Bootstrap-treeview應用后，我又嘗試了用jquery-treeview解決這個問題，記錄我的解決方案，但是不一定是最優。
引入必備css
- jquery.treeview.css
引入必備js
- jquery-3.0.0.js
- jquery.treeview.js
編寫頁面treeview_jQuery.html
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>TreeViewByJQuery</title> <link href="../static/css/jquery.treeview.css" rel="stylesheet"> <script src="../static/js/jquery-3.0.0.js"></script> <script src="../static/js/jquery.treeview.js"></script></head><script> $(function () { $.ajax({ type:"GET", url:"/tree/treeView.do", //后臺接口路徑 async:false, //非異步 dataType:"json", //數據格式為json success:function (data) { var html = buildTree(data); //調用buildtree()構建樹形結構 $("#tree").append(html); //將樹形結構追加到DOM元素中 } }); $("#tree").treeview({});//通過jquery.treeview將構建好的屬性結構變成一個動態的樹 }); /* 遞歸訪問后臺返回的數據，拼html代碼構建樹形結構 */ var buildTree = function(data){ var html=""; $.each(data,function(i,n){ //遍歷當前數據中的所有樹節點 html = html+"<li><span class=\"folder\">"+n.text+"</span>"; //當前節點為父節點 var children = buildTree(n.nodes); //遞歸遍歷當前節點的所有子節點 html = html+"<ul>"+children+"</ul>"; //將父節點與子節點拼在一起 }) return html;//返回構建的樹形結構 }</script><body><ul id="tree" class="filetree"></ul></body></html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/Lqq77s/article/details/85988942
