jstree使用小結(二)

 繼續上一篇:

1.數據  

 按照官網的json數據返回格式: 有兩種格式,我使用的格式如下:

$('#jstree1').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }
    ]
} });

這里data是后台返回的

//我這里由於項目原因稍微處理了下,/getData是后台數據返回的路徑
$.post('/getData',null,function(data){
    if(data.result && data.result.status=='200'){
        cb.call($this, data.result.datas);//data.result.datas的值是json數據
    }else{
        alert(data.result.message);
    }
});

2.右鍵菜單

   (1)在jstree的源碼中已經預定了右鍵菜單如下:

$.jstree.defaults.contextmenu = {

　　 select_node:true,//設置當前節點是否為選中狀態 true表示選中狀態

    show_at_node:true,//設置右鍵菜單是否和節點對齊 true表示對齊

    items : function (o, cb) { // Could be an object directly
            return {
                "create" : {
                    "separator_before"    : false,//Create這一項在分割線之前 
                    "separator_after"    : true,//Create這一項在分割線之后
                    "_disabled"            : false, //false表示 create 這一項可以使用; true表示不能使用
                    "label"                : "Create",  //Create這一項的名稱 可自定義
                    "action"            : function (data) {  //點擊Create這一項觸發該方法
                        var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);//獲得當前節點,可以拿到當前節點所有屬性
　　　　　　　　　　　　　　//新加節點
                        inst.create_node(obj, {}, "last", function (new_node) {
                            setTimeout(function () { inst.edit(new_node); },0);//新加節點后觸發 重命名方法,即 創建節點完成后可以立即重命名節點
                        });
                    }
                },
....

(2)這里我們自定義右鍵菜單

 var $tree=$('#tree1');
        $tree.jstree({
            "core": {
                "themes": {
                    "responsive": false
                },
                "check_callback": true,
                'data': []
            },
            "contextmenu":{
                select_node : false,
                show_at_node : true,
                items: function(o, cb){
                    //因為這里我們之后需要定義多個項,所以通過對象的方式返回
                    var actions={};
                    //添加一個"新增"右鍵菜單
                    actions.create={//這里的create其實闊以隨意命名,關鍵是里面的 這里面的 action回調方法
                        "separator_before"    : false,//Create這一項在分割線之前
                        "separator_after"    : true,//Create這一項在分割線之后
                        "_disabled"            : false, //false表示 create 這一項可以使用; true表示不能使用
                        "label"                : "新增",  //Create這一項的名稱 可自定義
                        "action"            : function (data) {  //點擊Create這一項觸發該方法,這理還是蠻有用的
                            var inst = $.jstree.reference(data.reference),
                                 obj = inst.get_node(data.reference);//獲得當前節點,可以拿到當前節點所有屬性
                            //新加節點,以下三行代碼注釋掉就不會添加節點
                            inst.create_node(obj, {}, "last", function (new_node) {
                                setTimeout(function () { inst.edit(new_node); },0);//新加節點后觸發 重命名方法,即 創建節點完成后可以立即重命名節點
                            });
                        }
                    };
                    //添加一個"重命名"右鍵菜單
                    actions.rename={
                        "separator_before"    : false,
                        "separator_after"    : false,
                        "_disabled"            : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
                        "label"                : "重命名",
                        "action"            : function (data) {
                            var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                            inst.edit(obj);
                        }
                    }
                    //添加一個"刪除"右鍵菜單
                    actions.delete= {
                        "separator_before"    : false,
                                "icon"                : false,
                                "separator_after"    : false,
                                "_disabled"            : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
                                "label"                : "刪除",
                                "action"            : function (data) {
                                    var inst = $.jstree.reference(data.reference),
                                            obj = inst.get_node(data.reference);
                                    if(inst.is_selected(obj)) {
                                        inst.delete_node(inst.get_selected());
                                    }
                                    else {
                                        inst.delete_node(obj);
                                    }
                        }
                    };
                    return actions;//返回右鍵菜單項
                }
            },
            "types": {
                "default": {
                    "icon": "fa fa-folder icon-state-warning icon-lg"
                },
                "file": {
                    "icon": "fa fa-file icon-state-warning icon-lg"
                }
            },
            "plugins": ["contextmenu","dnd", "state", "types"]
        });