jsTree 上下文菜单问题

Question

这应该是一个非常简单的问题，但我似乎无法在任何地方找到答案。我最近（就像今天一样）开始使用 jsTree，并且刚刚设置了我的第一棵树。我创建了一个仅包含静态文本的无序列表：

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

我执行 jsTree 的代码如下所示：

$(document).ready(function () {
        $("#demo1").bind("select_node.jstree",
                function(event, data) {
                    //DO SOMETHING WHEN A NODE IS CLICKED
                }).jstree();
});

然后我尝试添加上下文菜单。使用以下内容：

$(document).ready(function () {
        $("#demo1").bind("select_node.jstree",
                function(event, data) {
                    //DO SOMETHING WHEN A NODE IS CLICKED
                }).jstree({plugins: ["contextmenu"], contextmenu: {items: customMenu}});
    });

customMenu 是一个返回对象的简单函数。

当我执行第一个代码时，我得到了 jsTree 并且它折叠并展开。当我执行第二个时，jsTree 所在的区域显示“正在加载...”，仅此而已。如果我右键单击该单词，我就会看到菜单。

有什么建议吗？

如果，当我将其指向函数 customMenu 时，我添加 ()，那么我会得到一个非常奇怪的菜单，其中包含： -创造 -重命名 -删除 -编辑 - 切 - 复制 - 粘贴 --添加组 --删除

我不确定我知道发生了什么。我将函数名称更改为不同的名称，以确保我没有获得 jQuery 或 jsTree 函数，但我仍然遇到奇怪的行为。有什么建议吗？

Answer 1

建议不要自己处理上下文菜单的创建，而是让 jstree 为您做这件事。

因此，在初始化代码中，您可以编写：

$("#demo1").jstree(
{ 
    "plugins" : [ "contextmenu" ]
}

这足以拥有一个功能性上下文菜单。

Answer 2

不要将 on select 方法绑定到 jstree。相反，创建新的菜单项，如下面的代码所示。
这应该可以正常工作。

$("#demo1").jstree(
{ 
     "contextmenu":{
         items:{
              "LogicalNameForMenuItem":{
                     label: "DisplayNameForMenuItem",
                     action: function (node) {
                          <--Your code to handle the function goes here-->
                     } 
               }
          }
      },

      "plugins" : [ "contextmenu","crrm","ui" ]

});

这应该有效。

如果您想删除默认菜单项，请将它们设置为 false

"contextmenu":{
         items:{
            create:false,
            remove:false,
            ccp:false
         }
}