jstree上下文菜单不工作

Question

我正在使用ajax惰载加载jstree，并且我还实现了jstree的上下文菜单插件。所以，当上下文菜单中点击收到错误的

Uncaught TypeError: Cannot read property 'get_node' of null

好像jstree未满载，并试图使用上下文菜单。

任何建议如何在加载jstree后使用上下文菜单。

编辑：这里是我用来加载jstree

loadTree: function() { 
    $j('#JSTree').jstree({ 
     'core' : { 
      check_callback : true, 
      data : function(obj, cb) { 
       var path = this.get_path(obj,'/') || '/'; 
       ecpmServices.getTreeNode(path).then(function(response){ 
         var treeData = response.data; 
         if(typeof treeData === 'object') { 
           treeData = parseTree(treeData, obj); 
           console.log(treeData); 
           cb.call(this,treeData); 
         } 
       }); 
      } 
     }, 
     "contextmenu" : { 
      items : function(node) { 
       var tmp = $j.jstree.defaults.contextmenu.items(); 
       delete tmp.create.action; 
       delete tmp.rename; 
       delete tmp.ccp; 
       tmp.create.label = "New"; 
       tmp.create.submenu = { 
        create_folder: { 
         label: "Folder", 
         separator_after: true, 
         action: function (data) { 
          var inst = $j.jstree.reference(data.reference); 
          console.log(data.reference); 
           var obj = inst.get_node(data.reference); 
           inst.create_node(obj, { type : "folder", text : "New folder" }, "last", function (new_node) { 
           setTimeout(function() { inst.edit(new_node); },0); 
          }); 
         } 
        }, 
        create_file : { 
         label: "File", 
         action: function (data) { 
          var inst = $j.jstree.reference(data.reference), 
          obj = inst.get_node(data.reference); 
          inst.create_node(obj, { type : "file", text : "New file" }, "last", function (new_node) { 
           setTimeout(function() { inst.edit(new_node); },0); 
          }); 
         } 
        } 
       }; 
       if(this.get_type(node) === "file") { 
        delete tmp.create; 
       } 
       return tmp; 
      } 
     }, 
     "plugins" : ["contextmenu"] 
    }); 
}; 

在此先感谢

Answer 1

收到树数据后，您可以加载树的片段。像下面

<script type="text/javascript"> 
    $(function() { 
     //Call your ecpmServices.getTreeNode(path).then(function(response){ 
     //var treeData = response.data; 
     // if success then call loadTree(treeData) with treeData 
     // if failure handle it      
    }); 
</script> 

然后你的代码看起来像

loadTree: function(treeData) { 
$('#JSTree').jstree({ 
    'core' : { 
     check_callback : true, 
     data : treeData    
    }, 
    "contextmenu" : { 
     items : function(node) { 
      var tmp = $j.jstree.defaults.contextmenu.items(); 
      delete tmp.create.action; 
      delete tmp.rename; 
      delete tmp.ccp; 
      tmp.create.label = "New"; 
      tmp.create.submenu = { 
       create_folder: { 
        label: "Folder", 
        separator_after: true, 
        action: function (data) { 
         var inst = $j.jstree.reference(data.reference); 
         console.log(data.reference); 
          var obj = inst.get_node(data.reference); 
          inst.create_node(obj, { type : "folder", text : "New folder" }, "last", function (new_node) { 
          setTimeout(function() { inst.edit(new_node); },0); 
         }); 
        } 
       }, 
       create_file : { 
        label: "File", 
        action: function (data) { 
         var inst = $j.jstree.reference(data.reference), 
         obj = inst.get_node(data.reference); 
         inst.create_node(obj, { type : "file", text : "New file" }, "last", function (new_node) { 
          setTimeout(function() { inst.edit(new_node); },0); 
         }); 
        } 
       } 
      }; 
      if(this.get_type(node) === "file") { 
       delete tmp.create; 
      } 
      return tmp; 
     } 
    }, 
    "plugins" : ["contextmenu"] 
}); 
}; 

您可以从https://everyething.com/Example-of-simple-jsTree-with-dynamic-JSON-data