jstree上下文菜单无法正常工作

时间:2017-10-12 07:14:12

标签: jquery jstree

我正在使用ajax延迟加载加载app.js,并且我已经实现了jstree的上下文菜单插件。因此,当单击上下文菜单时,将错误视为

  

未捕获的TypeError:无法读取属性' get_node'为null

似乎jstree未完全加载并尝试使用上下文菜单。

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

编辑:这是我用来加载jstree的片段

jstree

提前致谢

1 个答案:

答案 0 :(得分: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

获取提示