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时，我添加（），然后我得到一个非常奇怪的菜单： -创建 -改名 -删除 -编辑 - 切 - 复制 - 糊 - 添加组 --delete

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

Answer 1

建议不要自己处理contextmenu创建，而是让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
         }
}

jsTree contextmenu问题

2 个答案: