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

时间:2020-03-07 16:53:17

标签: conditional-statements contextmenu jstree

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

菜单显示在第一级,选择菜单项显示警报。 菜单2上的不显示,这很好,我想要的是。

但是,在选择了2级节点之后,然后选择了1级节点,菜单将如期出现,但是菜单项的选择无济于事。

任何帮助表示赞赏。

提琴:https://jsfiddle.net/NervousElk/4p5hqg0r/17/提琴

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();                          
            }

        });      
}

1 个答案:

答案 0 :(得分:0)

您要删除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");
      }
});