jsTree自定义上下文菜单不基于类型文件夹/文件进行过滤

Question

我正在尝试为jsTree配置自定义上下文菜单.我希望文件有两个选项[重命名,删除],我希望文件夹有一个选项[创建]

下面的代码似乎正确如下所述:为不同的节点类型配置jstree右键单击contextmenu

然而,这似乎不起作用,有两个问题.

1. 两个上下文菜单都显示选项[重命名,删除]
2. 选择任一选项都会导致错误:Uncaught TypeError:undefined不是函数

我究竟做错了什么？编辑:这是一个小提琴

$( document ).ready(function() {
    function customMenu(node) {
        // The default set of all items
        var items = {
            createItem: { // The "create" menu item
                label: "Create",
                action: function () {
                    this.create(node);
                }
            },
            renameItem: { // The "rename" menu item
                label: "Rename",
                action: function () {
                    this.rename(node);
                }
            },
            deleteItem: { // The "delete" menu item
                label: "Delete",
                action: function () {
                    this.remove(node);
                }
            }
        };

        if ($(node).hasClass("folder") || $(node).hasClass("jstree-closed") || $(node).hasClass("jstree-open")) {
            delete items.deleteItem;
            delete items.renameItem;
        }

        else{
            delete items.createItem;
        }

        return items;
    }

    $('#tree').jstree({
        'core': {
            'data': [
                { "id": "ajson1", "parent": "#", "text": "Folder 1" },
                { "id": "ajson2", "parent": "ajson1", "text": "File 1" },
                { "id": "ajson3", "parent": "ajson1", "text": "File 2" }
            ]
        },
        "plugins": [ "contextmenu" ],
        "contextmenu": {items: customMenu}
    });
});

Answer 1

好吧,答案是jstree没有隐含地区分文件和文件夹.如果要进行区分,则需要添加标识符和自定义逻辑.

为此,我在每个数据对象中添加了以下内容.

"data" : { "file" : true }

然后定制逻辑变成了

if (node.data.file) {
    delete items.createItem;
}

else{
    delete items.deleteItem;
    delete items.renameItem;
}

此外,我实施自定义操作的方式是错误的.我通过查看jstree(jstree/src/jstree.contextmenu.js)的来源来解决这个问题.要启用创建和删除,您必须设置'check_callback':true.然后,您可以按如下方式实现create操作.

createItem: { // The "create" menu item
                        label: "Create",
                        action: function (data) {
                            var inst = $.jstree.reference(data.reference),
                                    obj = inst.get_node(data.reference);
                            inst.create_node(obj, {}, "last", function (new_node) {
                                new_node.data = {file: true};
                                setTimeout(function () { inst.edit(new_node); },0);
                            });
                        }
                    },

这里有完整的工作jsfiddle.