jQuery treeview樹形結構應用
阿新 • • 發佈：2021-03-21
本文例項為大家分享了jquery treeview樹形結構的應用程式碼，供大家參考，具體內容如下
繼Bootstrap-treeview應用後，我又嘗試了用jquery-treeview解決這個問題，記錄我的解決方案，但是不一定是最優。
引入必備css
jquery.treeview.css
引入必備js
jquery-3.0.0.js
jquery.treeview.js
編寫頁面treeview_jQuery.html
<!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="external nofollow" rel="stylesheet"> <script src="../static/js/jquery-3.0.0.js"><EkVBm/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;//返回構建的樹形結構 } http://www.cppcns.com </script> <body> <ul id="tree" class="filetree"></ul> </body> </html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。