首先到一個國外網站上下載Treeview插件：
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
當然你也可以通過我博客的源文件直接下載：
http://files.cnblogs.com/jishume/jquery_api_for_dw4.rar

為了形象一點，先看一個效果圖：

這個樹狀結構使用的HTML為<ul><li>標記，層層嵌套實現(xiàn)聯(lián)級關系，具體的輸出與樣式的設置請看源碼。

這里重點介紹下這個插件的幾個功能效果：

1、animated:"fast"

設置展開子節(jié)點時的顯示速度，一般有slow、normal、fast幾個值，與jQuery的hide（show）中的speed參數(shù)相似。

2、persist: "location"

記憶折疊的方式。location，頁面刷新不保留折疊狀態(tài)；cookie，頁面刷新保留折疊狀態(tài)。
3、collapsed: true

初始化時的折疊狀態(tài)。true，初始化為收縮節(jié)點狀態(tài)；false，與前相反。

4、unique: true

展開同級節(jié)點的唯一性。true，當展開一個節(jié)點時，同級的其他節(jié)點會自動關閉；false，當展開一個節(jié)點時，同級的其他節(jié)點保持原形，不做為。

貼一段源碼中的插件代碼：
[JS]

?<script src="../lib/jquery.js" type="text/javascript"></script>
?<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
?<script src="../jquery.treeview.js" type="text/javascript"></script>
? <script language="javascript" type="text/javascript">
?$(document).ready(function(){

??? //給ID為browser的UL標簽添加樹狀交互
??? $("#browser").treeview({
???? ?persist: "location",
???? ?collapsed: true,
????? unique: true
??? ?});

});

</script>

[HTML]

?<ul id="browser" class="filetree">
??<li><span class="folder">Folder 1</span>
???<ul>
????<li><span class="file">Item 1.1</span></li>
???</ul>
??</li>
??<li><span class="folder">Folder 2</span>
???<ul>
????<li><span class="folder">Subfolder 2.1</span>
?????<ul id="folder21">
??????<li><span class="file">File 2.1.1</span></li>
??????<li><span class="file">File 2.1.2</span></li>
?????</ul>
????</li>
????<li><span class="file">File 2.2</span></li>
???</ul>
??</li>
??<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
???<ul>
????<li><span class="file">File 3.1</span></li>
???</ul>
??</li>
??<li><span class="file">File 4</span></li>
?</ul>

?當然，通過jQuery的Ajax導步加載數(shù)據(jù)實現(xiàn)樹狀結構很酷，但是由于最近時間比較緊，所以會晚點提供相關源碼，大家繼續(xù)關注。

?

制作人：飛虎?????????????????????????????????????????? 無兄弟不編程！

====================================================

歡迎加QQ群進行更多交流：305397511???? 專注于php、mysql以及開源框架

轉載于:https://www.cnblogs.com/jishume/articles/2046939.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的使用jQuery Treeview插件实现树状结构效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。