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

中得到提示

jstree 上下文菜单不起作用

jstree Context menu not working

jquery

jstree