JsTree右键菜单错误

Question

当选择重命名节点时，出现JavaScript错误，指示this.rename（obj）未定义。

JavaScript运行时错误：对象不支持属性或方法“rename”

$(document).ready(function () {
        $('#marketing-category-tree').jstree({
            themes: {
                theme: "default",
                dots: true,
                icons: true
            },
            contextmenu: {
                items: {
                    "rename" : {
                        "label": "Rename",
                        "action": function (obj) { this.rename(obj); }
                    }
                }
            },
            plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
        })
        .bind("rename.jstree", function (e, data) {
            debugger;
            alert("RENAMING!!!");
        });
});

我也尝试了下面的代码，能够选择并重命名，但无法捕获更改事件。

$('#marketing-category-tree').jstree({
    themes: {
        theme: "default",
        dots: true,
        icons: true
    },
    plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
})
.bind("rename.jstree", function (e, data) {
    alert("RENAMING!!!");
});

- user2379092

---

我成功地让默认菜单项（即创建、删除、重命名）工作了，方法是将绑定参数从“rename.jstree”改为“rename_node.jstree”。正如Darin Dimitrov所建议的那样，这些东西并没有得到很好的记录。然而，在尝试使用文档示例进行自定义时，默认函数“this.rename”无法被识别。 - user2379092

我已经仔细阅读了文档、几篇博客文章以及这里的帖子，但是还是无法解决这个问题。每次尝试覆盖现有的内容时，我都会收到完全相同的错误提示：“this.rename不是一个函数”。我找不到在上下文菜单中去除未使用条目的方法（我只需要重命名和删除）。 - Select0r

Answer 1

我认为你要找的方法是edit。但首先你需要获取树的节点。尝试使用以下代码：

...
"contextmenu" : {
  "items" : renameItem : { // The "rename" menu item
              label : "Rename",
              action : function (obj) {
              n = $('#marketing-category-tree').jstree(true).get_node(obj.reference); //get node
              $('#marketing-category-tree').jstree(true).edit(n); //puts the node into edit mode
              }
            }
  }
...

HTH

- oerl

---

把一个项目放到“编辑”模式中，完成重命名后会调用rename_node函数？为什么我需要调用“$('#jstree').jstree(true).edit(node);”而不是“this.”在这里无法工作？（每个教程中都可以找到“this.rename”，但只是无法正常工作）。使用你的代码，我已经成功使“重命名”功能运行（顺便说一句：在“items”后缺少“{”）。 - Select0r

我发现“delete_node”是用于删除项目的函数。但我还是有些困惑。为什么我需要使用“edit”，它会转到“.on('rename_node.jstree', function (e, data) {”并且为什么“delete_node”（转到“$('#jstree').jstree(true).delete_node(node);”）可以工作，而不是只是“delete”？ 我认为这里大部分的困惑来自于方法命名的不一致性。 - Select0r

你在哪里找到它应该与 this.delete 一起工作？我建议坚持使用 jsTree API 描述：http://www.jstree.com/api/#。 - oerl

API 告诉我，有一个“delete_node”方法（以及一个“rename_node”方法）。对于这个问题的答案（以及其他问题），总是推荐使用 this.rename（但它根本不起作用）：https://dev59.com/u2oy5IYBdhLWcg3wiecp - Select0r

我能想到的唯一可能是答案涉及到一个旧版本的jsTree，而delete a.s.o.已经过时了。您想将节点设置为编辑模式，以便用户可以更改其名称，还是要自动设置名称？ - oerl

Answer 2

你的第一个代码示例不会起作用，因为

"action": function (obj) { this.rename(obj); }

在本例中，“this”是指向Window对象的指针，文档http://www.jstree.com/api/没有提到方法rename，只有rename_node方法。

以下是一个工作示例（右键单击任何节点，然后点击重命名）。

http://jsfiddle.net/w9snc6z1/4/

请注意，rename_node也不起作用，但根据文档。

set_text：设置节点的文本值。仅在内部使用，请使用rename_node（obj，val）。

不建议使用set_text而不是rename_node。

- Nikita

---

所以代码可以工作，但不应该使用... :) 我成功地将你的代码集成到我的项目中，但现在用户无法输入新名称，这正是原始方法所做的（正如oerl指出的那样，“编辑”应该用于此）。 - Select0r

Answer 3

你应该使用 var tree = $("#marketing-category-tree").jstree(true); 获取树的节点，然后对节点进行操作。

你可以使用这个 example，祝你好运 :)

- sep7696