jQuery treeview樹形結(jié)構(gòu)應(yīng)用
更新時間：2021年03月18日 17:19:51 作者：Lqq77s
這篇文章主要為大家詳細(xì)介紹了jQuery treeview樹形結(jié)構(gòu)應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery treeview樹形結(jié)構(gòu)的應(yīng)用代碼，供大家參考，具體內(nèi)容如下
繼Bootstrap-treeview應(yīng)用后，我又嘗試了用jquery-treeview解決這個問題，記錄我的解決方案，但是不一定是最優(yōu)。
引入必備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="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", //數(shù)據(jù)格式為json
success:function (data) {
var html = buildTree(data); //調(diào)用buildtree()構(gòu)建樹形結(jié)構(gòu)
$("#tree").append(html); //將樹形結(jié)構(gòu)追加到DOM元素中
}
});
$("#tree").treeview({});//通過jquery.treeview將構(gòu)建好的屬性結(jié)構(gòu)變成一個動態(tài)的樹
});
/*
遞歸訪問后臺返回的數(shù)據(jù)，拼html代碼構(gòu)建樹形結(jié)構(gòu)
*/
var buildTree = function(data){
var html="";
$.each(data,function(i,n){ //遍歷當(dāng)前數(shù)據(jù)中的所有樹節(jié)點
html = html+"<li><span class=\"folder\">"+n.text+"</span>"; //當(dāng)前節(jié)點為父節(jié)點
var children = buildTree(n.nodes); //遞歸遍歷當(dāng)前節(jié)點的所有子節(jié)點
html = html+"<ul>"+children+"</ul>"; //將父節(jié)點與子節(jié)點拼在一起
})
return html;//返回構(gòu)建的樹形結(jié)構(gòu)
}
</script>
<body>
<ul id="tree" class="filetree"></ul>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
- jquery實現(xiàn)點擊TreeView文本父節(jié)點展開/折疊子節(jié)點
- ASP.NET中基于JQUERY的高性能的TreeView補充
- 打造基于jQuery的高性能TreeView(asp.net)
- 為jQuery.Treeview添加右鍵菜單的實現(xiàn)代碼
- Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫生成菜單導(dǎo)航條
- jQuery 學(xué)習(xí)第六課 實現(xiàn)一個Ajax的TreeView
- 選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點的JS方法(jquery)
- jQuery 樹形結(jié)構(gòu)的選擇器
相關(guān)文章
這篇文章主要介紹了jquery中animate的stop()方法作用,實例分析了animate的stop()方法在視頻播放代碼中的使用技巧,感興趣的朋友可以對比分析一下帶stop方法與不帶stop方法運行效果的區(qū)別,需要的朋友可以參考下2015-01-01
jquery中attr、prop、data區(qū)別與用法分析
這篇文章主要介紹了jquery中attr、prop、data區(qū)別與用法,結(jié)合實例形式分析了jQuery中attr、prop、data的區(qū)別、功能、使用方法及相關(guān)注意事項,需要的朋友可以參考下2019-09-09
jQuery UI工具提示框部件Tooltip Widget
這篇文章介紹了jQuery UI工具提示框部件Tooltip Widget，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
jQuery構(gòu)造函數(shù)init參數(shù)分析續(xù)
其實樓主的F和jQuery.fn.init是相等的; 實現(xiàn)功能是和jq一樣的, 只是jq的把構(gòu)造函數(shù)放進原型;如果非要說原因,個人理解jq這樣寫整體結(jié)構(gòu)清晰,先是入口構(gòu)造函數(shù),緊跟著是原型部分(原型里面init是初始化),但是不好理解;乍一看確實挺繞, 我也是看了好久才明白怎么回事2015-05-05
jquery Ajax實現(xiàn)Select動態(tài)添加數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了jquery Ajax實現(xiàn)Select動態(tài)添加數(shù)據(jù)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
jQuery簡單實現(xiàn)向列表動態(tài)添加新元素的方法示例
這篇文章主要介紹了jQuery簡單實現(xiàn)向列表動態(tài)添加新元素的方法,涉及jQuery事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個，用來在線生成二維碼2013-08-08
jquery實現(xiàn)網(wǎng)頁定位導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)網(wǎng)頁定位導(dǎo)航，具有一定的實用價值和參考價值，感興趣的小伙伴們可以參考一下2016-08-08
頁面加載完成后再執(zhí)行JS的jquery寫法以及區(qū)別說明
本篇文章主要是對頁面加載完成后再執(zhí)行JS的jquery寫法以及區(qū)別進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要教大家簡單實現(xiàn)jQuery彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10