jsTree

目錄
一、介紹
二、安裝
  1. 載入 jsTree 主題
  2. 載入 JS
三、使用
  1. 設定 html 容器及內容
  2. 建立實例
  3. Demo

一、介紹

jsTree 是 jquery 套件，支援 HTML、JSON、AJAX 載入。其實這個套件用到的機會滿少的，但要用的時候這個算是功能齊全。

二、安裝

可以下載或使用 CDN。

1. 載入 jsTree 主題

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

2. 載入 JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

要注意 jQuery 不要用太新版的，我寫 demo 的時候裝 3.5.1 版不會動 XD

三、使用

1. 設定 html 容器及內容

<div id="jstree_demo_div">
    <ul>
        <li>Root node 1
            <ul>
                <li>Child node 1</li>
                <li><a href="#">Child node 2</a></li>
            </ul>
        </li>
        <li>Root node 2</li>
    </ul>
</div>

2. 建立實例

$(function() {
    $('#jstree_demo_div').jstree();
});

3. Demo

參考文件

• jsTree