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

Question

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

以下代码似乎正确如下所述：Configuring jstree right-click contextmenu for different node types

然而，这似乎不起作用，有两个问题。

1. 两个上下文菜单都显示[重命名，删除]
选项
2. 选择任一选项 导致错误：未捕获TypeError：undefined不是函数



我做错了什么？ 编辑：这是fiddle

$( 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）的来源来解决这个问题。要启用创建和删除，您必须设置＆＃39; check_callback＆＃39;：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。