大家好
 
最近作一些功能會需要用到樹狀圖
這功能說實在話還蠻實用的
很多分類是需要依樹狀圖顯示才會清楚明瞭
 
所以 jsTree 真的是 jQuery 超好用外掛之一
 
 
 
 
但是又遇到一個情況
 
假設我要在樹狀圖的節點上新增 右鍵選單功能呢?
因為樹狀圖上面的物件有時候需要複雜的操作
所以這功能也是蠻有需要的
我找一找發現他自己本身就有這外掛
 
 
 
 
但是...這時候我發現 jsTree 的一個問題...
就是文件很不足
找不太到一些外掛用法
 
所以我又找了找
有找到這個範例
 
 
哇!! 這真是幫了大忙...
 
我把它加一些註解給大家參考
$('#SimpleJSTree').jstree({
    //原本設定
    "core": {
        "check_callback": true,
        'data': jsondata
    },
    //啟用外掛
    "plugins": ["contextmenu"],
    "contextmenu": {
        "items": function ($node) {
            var tree = $("#SimpleJSTree").jstree(true);
            //回傳menu
            return {
                //第一層選單
                "Create": {
                    "separator_before": false,
                    "separator_after": true,
                    "label": "Create",//名稱
                    "action": false,
                    //第二層選單
                    "submenu": {
                        "File": {
                            "seperator_before": false,
                            "seperator_after": false,
                            "label": "File",
                            action: function (obj) {
                                //點擊後動作
                                $node = tree.create_node($node, { text: 'New File', type: 'file', icon: 'glyphicon glyphicon-file' });
                                tree.deselect_all();
                                tree.select_node($node);
                            }
                        },
                        "Folder": {
                            "seperator_before": false,
                            "seperator_after": false,
                            "label": "Folder",
                            action: function (obj) {
                                $node = tree.create_node($node, { text: 'New Folder', type: 'default' });
                                tree.deselect_all();
                                tree.select_node($node);
                            }
                        }
                    }
                },
                "Rename": {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Rename",
                    "action": function (obj) {
                        tree.edit($node);                                   
                    }
                },
                "Remove": {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Remove",
                    "action": function (obj) {
                        tree.delete_node($node);
                    }
                }
            };
        }
    }
});
給大家參考囉，感恩