javascript - jstree Angular Directive(指令)中不同节点的自定义上下文菜单

Question

在我的项目中，我有基于 jstee angular directive 的树。我使用 help 2 api 请求构建了这棵树。此请求提供文件夹和端点子节点(过滤器)的数据。我还创建了自定义上下文菜单，其中包含一些针对不同类型节点的功能。在此上下文菜单中，我定义了变量 check ，并在该变量的帮助下设置了节点操作的限制。上下文菜单的完整代码如下所示:

 $scope.contextMenu = {
            "create": {
                "label": "Create Folder",
                "icon": "ico/folder.png",
                "action": function (data) {
                    var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference),
                        id = obj['original']['id'];
                    var check = obj['original']['folderId'];

                    if (typeof check == "undefined") {
                        obj = {
                            text: prompt("put folder name"),
                            parent: id
                        };
                        eventService.createFolder(obj);
                        setTimeout(function () {
                            getTreeData();
                            $scope.load();
                        }, 100);
                    }
                    else {
                        alert("This function is not available");
                        return false
                    }
                    // inst.refresh(true)
                }
            },
            "rename": {
                "label": "Rename Folder",
                "icon": "ico/folder.png",
                "action": function (data) {
                    var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference),
                        check = obj['original']['folderId'];

                    if (typeof check == "undefined") {
                        var rename = {
                            id: obj.id,
                            text: prompt("put your name")
                        };
                        eventService.modifyFolder(rename);
                        inst.rename_node(obj, rename.text);
                    }
                    else {
                        alert("This function is not available");
                        return false
                    }
                }
            },
            "delete": {
                "label": "Delete Folder",
                "icon": "ico/folder.png",
                "action": function (data) {
                    var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference),
                        node = inst.get_selected(),
                        check = obj['original']['folderId'];

                    if (typeof check == "undefined") {
                        if (!node.length) {
                            return false;
                        }
                        eventService.deleteFolder(node);
                        inst.delete_node(node);
                    }
                    else {
                        alert("This function is not available");
                        return false
                    }
                }
            },
            "store": {
                "label": "Store Filter",
                "icon": "ico/file.png",
                "action": function (data) {
                    $scope.saveStateString();
                    var inst = $.jstree.reference(data.reference),
                        obj = inst.get_node(data.reference),
                        id = obj['original']['id'],
                        check = obj['original']['folderId'];

                    if (typeof check == "undefined") {
                        obj = {
                            body: $scope.state,
                            folderId: id,
                            text: prompt("put filter name")
                        };
                        // console.log(obj.body);
                        setTimeout(function () {
                            eventService.storeFilter(obj);
                        }, 1000);
                        setTimeout(function () {
                            getTreeData();
                            $scope.load();
                            alert("click to public filters to refresh the tree")
                        }, 1500)
                    } else {
                        alert("This function is not available");
                        return false
                    }
                }
            },
            "remove": {
                "label": "Remove Filter",
                "icon": "ico/file.png",
                "action": function (data) {
                    var inst = $.jstree.reference(data.reference),
                        node = inst.get_selected(),
                        obj = inst.get_node(data.reference),
                        check = obj['original']['folderId'];

                    if (typeof check == "undefined") {
                        alert("This function is not available");
                        return false
                    } else {
                        if (!node.length) {
                            return false;
                        }
                        eventService.deleteFilter(node);
                        inst.delete_node(node);
                    }
                }
            }
        };

现在我尝试按节点类型拆分此上下文菜单，对于每个节点我可以看到不同的上下文菜单，我在这里找到了一些解决方案，它说:

$('#jstree').jstree({
    'contextmenu' : {
        'items' : customMenu
    },
    'plugins' : ['contextmenu', 'types'],
    'types' : {
        '#' : { /* options */ },
        'level_1' : { /* options */ },
        'level_2' : { /* options */ }
        // etc...
    }
});
function customMenu(node)
{
    var items = {
        'item1' : {
            'label' : 'item1',
            'action' : function () { /* action */ }
        },
        'item2' : {
            'label' : 'item2',
            'action' : function () { /* action */ }
        }
    }

    if (node.type === 'level_1') {
        delete items.item2;
    } else if (node.type === 'level_2') {
        delete items.item1;
    }

    return items;
}

我试图在我的应用程序中重复这种方式，但总是看到“未定义”而不是上下文菜单。

有人可以帮我解决我的问题吗？ Plunker用我的代码

Answer 1

确保您正在使用有效的 jstree 指令。我替换了您指令中的错误

  if (config.plugins.indexOf('contextmenu') >= 0) {
                if (a.treeContextmenu) {
                    config.contextmenu = s[a.treeContextmenu];
                }
            }

            // if (config.plugins.indexOf('contextmenu') >= 0) {
            //     if (a.treeContextmenu) {
            //         config.contextmenu = config.contextmenu || {};
            //
            //         if (a.treeContextmenuaction != undefined) {
            //             config.contextmenu.items = function(e) {
            //                 return s.$eval(a.treeContextmenuaction)(e);
            //             }
            //         } else {
            //             config.contextmenu.items = function() {
            //                 return s[a.treeContextmenu];
            //             }
            //         }
            //     }
            // }

您的代码应如下所示

$scope.contextMenu = {
    "items": function custom (node){

            // your menu
      }

     if(something){
           // do whatever
      }

     return items
 }

这是你的工作plunker !