jsTreeの使い方 #JavaScript

仕事でjsTreeを使う機会があったのでその使い方。
FuelPHPに組み込んでの利用なのでその点ご留意ください。

準備

jsTreeをダウンロードする
dist/jstree.js、libs/jquery.jsをjsフォルダへコピー
dist/themes/default/の中身をcssへコピー
demo/filebrowser/file_splite.pngをimgへコピー

今回はdemo/filebrowserを改変して利用しますので、そのための設定をしています。ファイルのコピーを行ったらindex.phpをエディタに開きます。

index.phpより
- fsクラスをclasses/fs.phpにコピー
- <html>より上のPHP部分をコントローラーにコピー
- <html>から下の部分をビューにコピー

DB

今回用意したDBは以下のとおり。
テーブル名:categories
カラム:
id integer primary key auto_increment,
name varcharてきとう,
grade integer,
parent integer

カテゴリで階層を作りたかったので、grade＝階層ランクとparent＝親カテゴリIDを入れるカラムを設定しました。

コンテキストメニュー

view側のjQuery部分を編集。

"contextmenu":{
    "items": function($node) {
        var tree = $("#tree").jstree(true);
        return {
            "addition": {
                "separator_before": false,
                "separator_after": false,
                "label": "追加",
                "submenu": {
                    "addition_large_category" : {
                    "separator_after" : false,
                    "label" : "フォルダ",
                    "action" : function (data) {
                        var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference);
                        inst.create_node(
                            obj, {
                                type : "large_category",
                                text : "New folder"
                            },
                            "last",
                            function (new_node) {
                                setTimeout(function () {
                                     inst.edit(new_node);
                                },
                                0);
                            });
                        }
                    },
                    "addition_middle_category" : {
                    "separator_after" : false,
                    "label" : "ファイル",
                    "action" : function (data) {
                        var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference);
                        inst.create_node(
                            obj, {
                                type : "meddle_category",
                                text : "New folder"
                            },
                            "last",
                            function (new_node) {
                                setTimeout(function () {
                                     inst.edit(new_node);
                                },
                                0);
                            });
                        }
                    }
                },
            },
            "rename": {
                "separator_before": false,
                "separator_after": false,
                "label": "名称変更",
                "action": function (obj) {
                    tree.edit($node);
                }
            },
            "remove": {
                "separator_before": false,
                "separator_after": false,
                "label": "削除",
                "action": function (obj) {
                    tree.delete_node($node);
                }
            }
        };
    }
},

コンテキストメニューの設定はおよそここから読み取れるかと思います。
サブメニューの作り方、作成タイプなど。

今回はドラッグ＆ドロップによるコピーや移動を省きたかった（めんどうだった）ため、以下部分を修正（同ファイル）

'plugins' : ['state','dad','sort','types','contextmenu','unique']

どうやらdadがそれらしいのでここからdadを削除。

思いの外長くなったので此処から先は別記事で。長い記事は嫌い。
views下のファイルはこれ以外ほとんどいじることがないです。
次はコントローラー側の記述に触っていきますヽ(´@ω@｀)ﾉ