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

【问题标题】：jsTree custom contextmenu not filtering based on type folder/filejsTree自定义上下文菜单不基于类型文件夹/文件过滤
【发布时间】：2014-05-29 09:28:37
【问题描述】：

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

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

但是这似乎不起作用，有两个问题。

两个上下文菜单都显示选项 [重命名、删除]
选择任一选项导致错误：Uncaught TypeError: undefined is not a function

我做错了什么？编辑：这是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}
    });
});

【问题讨论】：

标签： javascript jstree

【解决方案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。然后，您可以例如按如下方式实现创建操作。

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在这里。

【讨论】：