jsTree自定义上下文菜单不基于类型文件夹/文件进行过滤 [英] jsTree custom contextmenu not filtering based on type folder/file

问题描述

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

下面的代码似乎正确如下所述：

  $（document）.ready（function（）{
 function customMenu（node）{
 //所有项目的默认集合
 var items = {
 createItem：{//创建菜单项
标签：创建，
操作：function（）{
 this.create（node）; 
} 
}，
 renameItem：{//重命名菜单项
标签：重命名，
操作：function（）{
 this。重命名（节点）; 
} 
}，
 deleteItem：{//删除菜单项
标签：删除，
操作：function（） {
 this.remove（node）; 
} 
} 
}; 
 
 if（$（node）.hasClass（folde r）|| $（node）.hasClass（jstree-closed）|| $（node）.hasClass（jstree-open））{
 delete items.deleteItem; 
 delete items.renameItem; 
} 
 
 else {
 delete items.createItem; 
} 
 
退货; 
} 
 
 $（'＃tree'）。jstree（{
'core'：{
'data'：[
 {id ：ajson1，parent：＃，text：Folder 1}，
 {id：ajson2，parent：ajson1，text：File 1}，
 {id：ajson3，parent：ajson1，text：文件2} 
] 
}，
 plugins：[contextmenu]，
contextmenu：{items：customMenu} 
}）; 
}）; 
  

解决方案

好的答案是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：{//创建菜单项
 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 这里。

I am trying to configure a custom context menu for jsTree. I want files to have two options [Rename, Delete] and I want folders to have one option [Create]

The below code seems correct as described here: Configuring jstree right-click contextmenu for different node types

However this does not seem to work, there are two problems.

1. Both context menus display the options [Rename, Delete]
2. Choosing either option causes the error: Uncaught TypeError: undefined is not a function

What am I doing wrong? Edit: here is a 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}
    });
});

解决方案

Okay so the answer is that jstree does not implicitly distinguish between files and folders. If you want to make the distinction you need to add an identifier and custom logic.

To accomplish this I added the following to each of my data objects.

"data" : { "file" : true }

The custom logic then became

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

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

Furthermore, the manner in which I was implementing custom actions was wrong. I figured this out by looking at the source of jstree (jstree/src/jstree.contextmenu.js). To enable create and delete you must set 'check_callback': true. Then you can for example implement the create action as follows.

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);
                            });
                        }
                    },

Full working jsfiddle here.

这篇关于jsTree自定义上下文菜单不基于类型文件夹/文件进行过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！