MicroHank · June 2, 2016 03:11
diff --git a/gistfile1.txt b/gistfile1.txt
 JQuery 外掛：https://www.jstree.com/

 利用 npm bower 下載原始碼，或是整包 zip 下載解壓縮放至於 bower_components 管理。
 引入 CSS
 <link rel="stylesheet" href="bower_components/jstree/dist/themes/default/style.min.css" />
 引入 Js
 <script src="bower_components/jstree/dist/jstree.min.js"></script>

 目的：以 Ajax 方式，讀取檔案樹子節點。

 [HTML] 設定容器
 <div id="jstree_demo_div"></div>

 [JS] 設定 JsTree 
 // JsTree: 使用 Ajax 去後端取得子節點，並呈現在檔案樹。
 $("#jstree_demo_div").jstree({
    // 核心設定
    "core" : {
        "data" : {
            "dataType" : "json",
            "url" : "ajax/ajax_file_access.php?type=get_sub_node",
            "data" : function (node) {
                console.log(node) ;
                if (node.id === "#") {
                    return {"file_id" : "1"} ;
                }
                else {
                    return {"file_id" : node.id} ;
                }
            }
        },
    },
    // Tree 樣式
    "plugins" : [ "wholerow" ]
 });

 @ 屬性說明
     url：後端 API，目的讀取指定檔案節點的子節點，主要參數是 file_id
     data (core.data.data)：callback function，主要是點擊節點(展開)時的動作。
 @ 函數的參數 node，會從前端接收到點擊展開的節點內容。
 @ 第一次載入 JsTree 時，其節點的 node.id 會給定「#」，這是為了去後端讀取 root 節點資訊，因此判斷 node.id = # 時，我們設定節點編號 1 (我們定義的根節點編號) 去後端讀取根目錄。
 @ return {"file_id" : "1"} 意義是傳遞 GET 參數 file_id 給 url，可以傳多個參數，return {"p1" : v1, "p2" : v2, ...}。

 $("#jstree_demo_div").on("changed.jstree", function (e, data) {
    console.log(data.node.id) ;
    console.log(data.node.text) ;
    console.log(data.node.original.path) ;
 }) ;

 @ 點擊節點 (非展開) 時，可取得節點資訊：
    data.node 為節點內容
    data.node.text 節點名稱
    data.node.original 是在後端設定節點資訊時的陣列，節點有特定格式，陣列傳回前端時，會轉成固定格式 (data.node)，多的欄位在 original。

 @ 回傳資料格式
 [
    {
        id: "95",
        text: "tmp",
        state: 
        {
            opened: false
        },
        children: true
    }
 ]

 @ 我們目的只要回傳「目錄」，並檢查目錄是否擁有子目錄節點，因此，在 children 屬性設定 true | false，決定目錄是否可展開。
 @ 其餘屬性，請參考官網說明 https://www.jstree.com/docs/json/
	JQuery 外掛：https://www.jstree.com/

	利用 npm bower 下載原始碼，或是整包 zip 下載解壓縮放至於 bower_components 管理。
	引入 CSS
	<link rel="stylesheet" href="bower_components/jstree/dist/themes/default/style.min.css" />
	引入 Js
	<script src="bower_components/jstree/dist/jstree.min.js"></script>

	目的：以 Ajax 方式，讀取檔案樹子節點。

	[HTML] 設定容器
	<div id="jstree_demo_div"></div>

	[JS] 設定 JsTree
	// JsTree: 使用 Ajax 去後端取得子節點，並呈現在檔案樹。
	$("#jstree_demo_div").jstree({
	// 核心設定
	"core" : {
	"data" : {
	"dataType" : "json",
	"url" : "ajax/ajax_file_access.php?type=get_sub_node",
	"data" : function (node) {
	console.log(node) ;
	if (node.id === "#") {
	return {"file_id" : "1"} ;
	}
	else {
	return {"file_id" : node.id} ;
	}
	}
	},
	},
	// Tree 樣式
	"plugins" : [ "wholerow" ]
	});

	@ 屬性說明
	url：後端 API，目的讀取指定檔案節點的子節點，主要參數是 file_id
	data (core.data.data)：callback function，主要是點擊節點(展開)時的動作。
	@ 函數的參數 node，會從前端接收到點擊展開的節點內容。
	@ 第一次載入 JsTree 時，其節點的 node.id 會給定「#」，這是為了去後端讀取 root 節點資訊，因此判斷 node.id = # 時，我們設定節點編號 1 (我們定義的根節點編號) 去後端讀取根目錄。
	@ return {"file_id" : "1"} 意義是傳遞 GET 參數 file_id 給 url，可以傳多個參數，return {"p1" : v1, "p2" : v2, ...}。

	$("#jstree_demo_div").on("changed.jstree", function (e, data) {
	console.log(data.node.id) ;
	console.log(data.node.text) ;
	console.log(data.node.original.path) ;
	}) ;

	@ 點擊節點 (非展開) 時，可取得節點資訊：
	data.node 為節點內容
	data.node.text 節點名稱
	data.node.original 是在後端設定節點資訊時的陣列，節點有特定格式，陣列傳回前端時，會轉成固定格式 (data.node)，多的欄位在 original。

	@ 回傳資料格式
	[
	{
	id: "95",
	text: "tmp",
	state:
	{
	opened: false
	},
	children: true
	}
	]

	@ 我們目的只要回傳「目錄」，並檢查目錄是否擁有子目錄節點，因此，在 children 屬性設定 true \| false，決定目錄是否可展開。
	@ 其餘屬性，請參考官網說明 https://www.jstree.com/docs/json/