Jstree 有条件地显示上下文菜单

Question

下面的代码显示了我尝试仅在级别 1 显示 jstree 上下文菜单。

菜单显示在第一级，菜单项的选择显示警告。菜单 不显示 级别 2，这很好，也是我想要的。

但是，在选择了一个 2 级节点，然后选择了一个 1 级节点后，菜单会正常显示，但是选择菜单项没有任何反应。

感谢任何帮助。

fiddle: https://jsfiddle.net/NervousElk/4p5hqg0r/17/ fiddle

document.getElementById("gobtn").addEventListener("click", buildtree);

function buildtree()
{               
        $('#ttstafftree').jstree(
        {           
        plugins: ["wholerow",  "json_data", "ui", "themes", "sort", "state",  "contextmenu"], 
        'core' : 
            {                                   
                "check_callback": true,                 
                'data' : 
                    [
                    { "id" : "ajson1", "parent" : "#", "text" : "Root 1" },
                    { "id" : "ajson1-1", "parent" : "ajson1", "text" : "a" },                       
                    { "id" : "ajson2", "parent" : "#", "text" : "Root 2" },
                    { "id" : "ajson2-1", "parent" : "ajson2", "text" : "b" },                       
                    ]
            },

            "contextmenu": 
            {                                                                               
                "items": 
                {
                  opt1: 
                  {
                    label: "opt 1",                     
                    action: function(data) 
                    {
                     alert('opt 1')                      
                    }                                                                                       
                  },

                  opt2: 
                  {
                    label: "opt 2",
                    action: function(data) 
                    {
                     alert('opt 2')                      
                    }                                                                           
                  }                                                                               
                }                
            },                      
        })  

        .on('show_contextmenu.jstree', function(e, reference, element) 
        {                           
            if ( reference.node.parents.length != 1) 
            {                             
               $('.vakata-context').remove();                          
            }

        });      
}

Answer 1

您要删除 vakata-context 元素以隐藏叶节点的上下文菜单。虽然我不太确定这一点，但对我来说，这似乎破坏了上下文菜单上设置的事件处理程序，因此它们不再起作用。查看上下文菜单的源代码，jsTree 内部使用 $.vakata.context.hide() 来隐藏树。您可以在 show_contextmenu.jstree 事件的事件处理程序中使用它。

.on('show_contextmenu.jstree', function (e, reference, element) {
      if (reference.node.parents.length != 1) {
          $.vakata.context.hide();
          //$('.vakata-context').css('display',"none");
      }
});

Jstree 有条件地显示上下文菜单

Jstree show context menu conditionally

conditional-statements

contextmenu

jstree