jsTree 和上下文菜单：修改项目答案

【问题标题】：jsTree and Context Menu: modify itemsjsTree 和上下文菜单：修改项目
【发布时间】：2014-01-13 16:20:11
【问题描述】：

我正在使用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 */ }
    }
}

我哪里错了？

【问题讨论】：

标签： javascript jquery contextmenu jstree

【解决方案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);
                }
            }
        };
    }
}

【讨论】：

我想在完成任何类型的修改时获得我更新的data。我怎么可能达到。 ?
使用您的代码时，Uncaught TypeError: tree.create_node is not a function 创建操作出错
很可能，您忘记在 html 中将“#tree”更改为您的树的 id 在这一行：var tree = $("#tree").jstree(true);跨度>
您也可以像这样获取树实例：var tree = $.jstree.reference(obj.reference); 这在跨不同树共享相同的上下文菜单配置时特别有用。 ..（可能还有其他方式）
@sara_thepot 解决方案是一个可行的解决方案。如果有人想看完整的源代码，可以参考jsTree with custom context menu

【解决方案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);

                                }
                            }
                        };
                    }
                },

【讨论】：

您的 rename 和 delete 操作正常，但 create 操作无法正常工作。当创建一个新节点然后想要为不同的节点创建另一个时，将新节点添加到先前选择的节点中。

【解决方案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);
                }
            }
        };
    }
}

【讨论】：

【解决方案4】：

更易读的例子

 var tree = $('#treeDiv').jstree({
        "plugins": ["contextmenu"],
        "contextmenu": {
            "items": function ($node) {
                return {
                    "create": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "Create",
                        "action": function (obj) {
                            // action code here
                        }
                    }
                };
            }
        }
    });

【讨论】：

【解决方案5】：

"contextmenu": {
  "items": function ($node) {
    var tree = $("#tree").jstree(true);
    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);
        }
      }

    }
  }
}

【讨论】：