[jsTree]jsonで定義した内容をツリー表示する（ajax）

jsTree（ https://www.jstree.com/ ）はエクスプローラ風のツリー表示を行うことができるJavascriptライブラリです。

ここでは、jsonファイルに定義した内容をツリー表示するサンプルを掲載しています。また、ノードクリック時に定義した内容を取得する方法もあわせて掲載しています。

jsonファイルから読み込んでツリー表示

以下がそのサンプルになります。詳細はサンプル内のコメントを参照ください。

しっかし、難しいな～～～。とっかかりなんて全くわからなかったYO!

HTML

<!-- ツリーを表示する器を定義 -->
<div id="jstree"></div>

json（doraemon.json）

{
    "text"  : "のび太のパパ",
    "state" : {
        "opened" : true
    },
    "a_attr"     : { "test_data" : "のびすけ" },
    "children"   : [
        {
            "text"  : "のびのびた",
            "state" : {
                "opened" : true
            },
            "a_attr"     : { "test_data" : "のびた" }
        }
    ]
}

Javascript

$(function () {
    $('#jstree').jstree({
        'core' : {
             'url' : 'doraemon.json', // ajaxで読み込むjsonファイル
             'dataType' : 'json',     // Webサーバがない状態でも読み込むために追加（chromeではこれをつけてもNG）
             'data' : function(node) { // 正直何してるかわからない
                 return {'id', node.id };
             }
         }
    }
})
.on("select_node.jstree", function(e, data) {
    // 選択されたノードの情報を取得・出力
    console.log(data.node.id); // 自動で割り当てられる
    console.log(data.node.text); // ノード名（jsonで定義した名前）
    console.log(data.node.a_attr.test_data); // a_attr（jsonで定義した値）
    /*
     * aタグ内にliタグが作成される。
     * a_attrて定義した内容はaタグ内の属性として定義される
     */
})
.on("changed.jstree", function(e, data) {
    // 変更されたノードの情報を取得・出力

    /*
       変更時のみ本イベントが呼び出されると思っていたが、変更されなくても
       呼び出されてた。ほゎ～～～い～なぜに～～
     */

    console.log(data.node.id); // 自動で割り当てられる
    console.log(data.node.text); // ノード名（jsonで定義した名前）
    console.log(data.node.a_attr.test_data); // a_attr（jsonで定義した値）
});