iT邦初學者
10級

[jQuery] Tree Plugin 樹狀圖外掛

轉寄

檢舉

做專案時用到此套件，用這篇文章紀錄一下用法
整體外掛蠻輕量的，但是好像已經沒有在更新了，所以如果需求不多的話可以考慮使用此外掛

套件網址：http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
套件 Demo：http://jquery.bassistance.de/treeview/demo/

發佈到：	分享時間：2012-07-30 23:19:02
	▼ ADVERTISEMENT ▼

分享內容

5人

Tree Plugin

本套件已實作了樹狀結構、收合行為、 Node 新增與刪除等
我們來實際看一個範例
範例效果：http://design2u.me/blog/example/treeView/

範例圖片：

以下用幾段 snippet code 來解釋其用法

引入 Tree Plugin

由於 tree plugin 有用到 cookie 的功能
會建議一併將 cookie.js 引入

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>

增加檔案

$("#addFile").click(function() {
                var branches = $(
                    "<li><span class='file'>子資料</span></li></ul></li>")
                    .appendTo("#browser");
                $("#browser").treeview({
                    add: branches
                });
            });

增加資料夾

$("#addDirectory").click(function() {
                var branches = $(
                    "<li><img src='images/folder.gif' />資料夾</span></li>")
                    .appendTo("#browser");
                $("#browser").treeview({
                    add: branches
                });
            });

參數設定

使用以下下此段設定參數

$("#browser").treeview({
    collapsed: false, //是否預先打開
    animated: "fast", //動畫使用
    control:"#sidetreecontrol", //將 打開/折合事件綁定至該 div
    persist: "cookie",
    cookieId: "navigationtree",
    prerendered:false, //預先載入同 Layer 內容
    unique:true //打開某選項，關閉其他選項
});

其中 control:"#sidetreecontrol" 是配合以下 DOM 設定互動的

<div id="sidetreecontrol"> <a href="?#">折疊全部</a> | <a href="?#">打開全部</a>

完整程式碼

如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>jQuery TreeView</title>
 
    <link rel="stylesheet" href="css/jquery.treeview.css" />
 
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script src="js/jquery.treeview.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        $(function() {
            //初始設定
            $("#browser").treeview({
                collapsed: false, //是否預先打開
                animated: "fast", //動畫使用
                control:"#sidetreecontrol", //將 打開/折合事件綁定至該 div
                persist: "cookie",
                cookieId: "navigationtree",
                prerendered:false, //預先載入同 Layer 內容
                unique:true //打開某選項，關閉其他選項
            });
 
            //增加資料夾
            $("#addDirectory").click(function() {
                var branches = $(
                    "<li><img src='images/folder.gif' />資料夾</span></li>")
                    .appendTo("#browser");
                $("#browser").treeview({
                    add: branches
                });
            });
 
            //增加檔案
            $("#addFile").click(function() {
                var branches = $(
                    "<li><span class='file'>子資料</span></li></ul></li>")
                    .appendTo("#browser");
                $("#browser").treeview({
                    add: branches
                });
            });
        });
    </script>
    </head>
    <body>
 
    <div id="main">
 
    <h1>jQuery Tree View</h1>
 
    <div id="sidetreecontrol"> <a href="?#">折疊全部</a> | <a href="?#">打開全部</a> </div><br>
    <button id="addFile">addFile</button> <button id="addDirectory">addDirectory</button>
    <hr>
 
    <ul id="browser" class="filetree">
    <img src="images/folder.gif" />主資料夾</span>
        <li><img src="images/folder.gif" />資料夾</span></li>
        <li><img src="images/folder.gif" />資料夾</span>
            <ul>
                <li><img src="images/file.gif" /> 子資料</li>
            </ul>
        </li>
        <li><img src="images/folder.gif" />資料夾</span>
            <ul>
                <li><img src="images/folder.gif" /> 子資料夾</span>
                    <ul id="folder21">
                        <li><img src="images/file.gif" />子資料</li>
                        <li><img src="images/file.gif" />子資料</li>
                        <li><img src="images/file.gif" />子資料</li>
                    </ul>
                </li>
                <li><img src="images/file.gif" />子資料</li>
            </ul>
        </li>
        <li><img src="images/folder.gif" />資料夾</span>
            <ul>
                <li><img src="images/file.gif" /> 子資料</li>
            </ul>
        </li>
        <li><img src="images/file.gif" /> 子資料</li>
    </ul>
 
</div>
 
</body></html>

大致的說明都已寫在 Code 當中
其實就是將相關 Library 引入之後，實作 <ul> <li> 的架構

大致可以設定各種樹狀結構的樣式，更完整的接收參數可參考此網址：http://docs.jquery.com/Plugins/Treeview/treeview

不過官方說由於此套件已停止更新，未來更多內容建議參考 jsTree：http://www.jstree.com/demo

參考資料：http://design2u.me/blog/378/jquery-tree-plugin-%E6%A8%B9%E7%8B%80%E5%9C%96%E5%A4%96%E6%8E%9B

| 推薦排序：高->低低->高發表時間|隱藏全部回應 |

[jQuery] Tree Plugin 樹狀圖外掛

ted99tw( iT邦初學者1級 )
2012-07-30 23:31:48

檢舉

回應

回應：

請填寫您的回應，長度限為1,000個字，回應不計點數，也不限使用次數

哈哈

哭

怒

驚

毆飛

暈

開心

飛

抗議

落寞

睡覺

讚

忙

噴鼻血

汗

失神

爆氣

疑惑

Orz

冷

病

不耐煩

喜歡

臉紅

噎到

放手

打嗑睡

掰掰

放馬過來

敲碗

簽名

筆記

拍手

沙發

囧

無言

偷笑

翻桌

謝謝

灑花

窮

瞎

倒

抱抱

逃跑

嗚

炸死你

愛你

遜

生日快樂

空

rock

嘆氣

下雨

衝刺

搖頭

吃

飽

醉

拍照

打球

健身

駭客

射門

泡湯

踹共

唱歌

做菜

上傳圖片

選擇圖檔

▼ ADVERTISEMENT ▼

邦友收藏動態

最新收藏｜最多人推｜最多人收

更多最新收藏>>

新增收藏

收藏到iT邦 書籤小工具

「收藏到iT邦」讓你更方便收藏站外文章。可用下面其中一種方法安裝：

拖拉上面的「收藏到iT邦」連結到瀏覽器的書籤列
在連結上方按右鍵，選擇「加到我的最愛」

之後看到喜歡的站外文章，只要點一下「收藏到iT邦」，就會收藏起來囉

安裝「收藏快捷鍵」

安裝「收藏快捷鍵」，可以讓邦友直接透過Google工具列上的按扭，快速收藏站內、站外的網頁。

回應：

檢舉違規

推薦

邦友收藏動態

iT邦粉絲團－熱門團

相關問答

回應 ：

檢舉違規

推薦

邦友收藏動態

iT邦粉絲團－熱門團

訂閱每日摘要

相關問答

回應：