jsTree和上下文菜单:修改项目

Question

我正在使用jsTree 3.0.0,我需要通过以下方式之一修改上下文:

• 更改默认项目的标签语言,禁用某些默认项目并添加新项目.
• 重写所有项目并绑定到一些新项目的创建,重命名和删除功能.

我尝试了几种方法但没有任何效果.例如,Uncaught TypeError: Object [object global] has no method 'create'当我单击"创建"时,这将返回.

"contextmenu":{
    "items": function($node) {
        return {
            createItem : {
                 "label" : "Create New Branch",
                 "action" : function(obj) { this.create(obj); alert(obj.text())},
                 "_class" : "class"
            },
            renameItem : {
                 "label" : "Rename Branch",
                 "action" : function(obj) { this.rename(obj);}
            },
            deleteItem : {
                 "label" : "Remove Branch",
                 "action" : function(obj) { this.remove(obj); }
            }
        };
    }
},

如果我尝试添加一个项目,如下一个示例所示,我将松开默认菜单项:

items : { 
    "create_folder" : {
        "separator_before" : false,
        "separator_after" : false,
        "label" : "Create Folder",
        "action" : function (obj) { alert(1); /* this is the tree, obj is the node */ }
    }
}

我哪里错了？

Answer 1

解决:

"contextmenu":{         
    "items": function($node) {
        var tree = $("#tree").jstree(true);
        return {
            "Create": {
                "separator_before": false,
                "separator_after": false,
                "label": "Create",
                "action": function (obj) { 
                    $node = tree.create_node($node);
                    tree.edit($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);
                }
            }
        };
    }
}

Answer 2

对于jstree v3.+(我测试3.2.1)这个例子工作

"contextmenu":{
                    "items": function () {
                        return {
                            "Create": {
                                "label": "Create",
                                "action": function (data) {
                                    var ref = $.jstree.reference(data.reference);
                                        sel = ref.get_selected();
                                    if(!sel.length) { return false; }
                                    sel = sel[0];
                                    sel = ref.create_node(sel, {"type":"file"});
                                    if(sel) {
                                        ref.edit(sel);
                                    }

                                }
                            },
                            "Rename": {
                                "label": "Rename",
                                "action": function (data) {
                                    var inst = $.jstree.reference(data.reference);
                                        obj = inst.get_node(data.reference);
                                    inst.edit(obj);
                                }
                            },
                            "Delete": {
                                "label": "Delete",
                                "action": function (data) {
                                    var ref = $.jstree.reference(data.reference),
                                        sel = ref.get_selected();
                                    if(!sel.length) { return false; }
                                    ref.delete_node(sel);

                                }
                            }
                        };
                    }
                },

Answer 3

更新了上一版本的代码

"contextmenu":{         
    "items": function($node) {
        var tree = $("#tree").jstree(true);
        return {
            "Create": {
                "separator_before": false,
                "separator_after": false,
                "label": "Create",
                "action": function (obj) { 
                    $node = tree.jstree('create_node', $node);
                    tree.jstree('edit', $node);
                }
            },
            "Rename": {
                "separator_before": false,
                "separator_after": false,
                "label": "Rename",
                "action": function (obj) { 
                    tree.jstree('edit', $node);
                }
            },                         
            "Remove": {
                "separator_before": false,
                "separator_after": false,
                "label": "Remove",
                "action": function (obj) { 
                    tree.jstree('delete_node', $node);
                }
            }
        };
    }
}