jstree contextmenu创建文件/文件夹功能

发布于 2024-11-24 07:49:23 字数 4405 浏览 2 评论 0原文

我试图让用户创建文件或文件夹。因此,当他们右键单击菜单时,上下文菜单将显示: 创建=> 文件 文件夹

这部分工作正常,问题在于附加到每个上下文菜单的功能。此时单击“文件”或“文件夹”会调用: this.create(obj); 如何指定类型?我尝试过 obj.attr("rel","type","folder"),我尝试过 obj.rslt.rel 和许多其他方法,但我'我只是在黑暗中拍摄,哈哈。我已经阅读了文档,布局很好,但对于解释对象的属性毫无用处。

下面是上下文菜单、类型插件和创建节点的绑定的代码。

    fma_jstree = $("#archive")
.bind("before.jstree", function (e, data) {
    $("#alog").append(data.func + "<br />");
})
.jstree({
    // List of active plugins
    "plugins" : [
    "themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"
    //"themes","json_data","ui","crrm","cookies","dnd","search","types","contextmenu"
    ],

    "contextmenu" : {
        items : { // Could be a function that should return an object like this one
            "create" : {
                "separator_before"  : false,
                "separator_after"   : true,
                "label"             : "Create",
                "action"            : false,
                "submenu" :{
                    "create_file" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "File",
                        action : function (obj) {
                            this.create(obj);
                        }
                    },
                    "create_folder" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "Folder",
                        action : function (obj) { this.create(obj); }
                    }
                }
            }
        }
    },
        // Using types - most of the time this is an overkill
    // read the docs carefully to decide whether you need types
    "types" : {
        // I set both options to -2, as I do not need depth and children count checking
        // Those two checks may slow jstree a lot, so use only when needed
        "max_depth" : -2,
        "max_children" : -2,
        // I want only `drive` nodes to be root nodes
        // This will prevent moving or creating any other type as a root node
        "valid_children" : [ "drive" ],
        "types" : {
            // The default type
            "default" : {
                // I want this type to have no children (so only leaf nodes)
                // In my case - those are files
                "valid_children" : "none",
                // If we specify an icon for the default type it WILL OVERRIDE the theme icons
                "icon" : {
                    "image" : icon_url + "/file.png"
                }
            },
            // The `folder` type
            "folder" : {
                // can have files and other folders inside of it, but NOT `drive` nodes
                "valid_children" : [ "default", "folder" ],
                "icon" : {
                    "image" : icon_url + "/folder.png"
                }
            },
            // The `drive` nodes
            "drive" : {
                // can have files and folders inside, but NOT other `drive` nodes
                "valid_children" : [ "default", "folder" ],
                "icon" : {
                    "image" : icon_url + "/root.png"
                },
                // those prevent the functions with the same name to be used on `drive` nodes
                // internally the `before` event is used
                "start_drag" : false,
                "move_node" : false,
                "delete_node" : false,
                "remove" : false
            }
        }
    },
    .bind("create.jstree", function (e, data) {

    //if creating a root node
    if(!$(data.rslt.parent).attr("id")) var id = 1;
    //else get parent
    else var id = data.rslt.parent.attr("id").replace("node_","");
    $.post(
        ajaxurl,
        {
            "action" : "fma_create_node",
            "operation" : "create_node",
            "id" : id,
            "position" : data.rslt.position,
            "title" : data.rslt.name,
            "type" : data.rslt.obj.attr("rel")
        },
        function (r) {
            if(r.status) {
                $(data.rslt.obj).attr("id", "node_" + r.id);
            }
            else {
                $.jstree.rollback(data.rlbk);
            }
        },
        'json'
        );
})

任何帮助将不胜感激;) 问候, 戴蒂

I'm trying to let the user create either a file or a folder. So when they right click on the menu the context menu will show:
create =>
file
folder

This part is working, the problem lies in the function attached to each of these context menus. At the moment clicking 'file' or 'folder' calls: this.create(obj); How do I specify the type? I've tried obj.attr("rel","type","folder"), I've tried obj.rslt.rel and many others but I'm just shooting in the dark, lol. I have gone through the documentation, the layout is good but its useless for explaining the properties of objects.

Below is the code for the context menu, the types plugin and the bind for the create node.

    fma_jstree = $("#archive")
.bind("before.jstree", function (e, data) {
    $("#alog").append(data.func + "<br />");
})
.jstree({
    // List of active plugins
    "plugins" : [
    "themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"
    //"themes","json_data","ui","crrm","cookies","dnd","search","types","contextmenu"
    ],

    "contextmenu" : {
        items : { // Could be a function that should return an object like this one
            "create" : {
                "separator_before"  : false,
                "separator_after"   : true,
                "label"             : "Create",
                "action"            : false,
                "submenu" :{
                    "create_file" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "File",
                        action : function (obj) {
                            this.create(obj);
                        }
                    },
                    "create_folder" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "Folder",
                        action : function (obj) { this.create(obj); }
                    }
                }
            }
        }
    },
        // Using types - most of the time this is an overkill
    // read the docs carefully to decide whether you need types
    "types" : {
        // I set both options to -2, as I do not need depth and children count checking
        // Those two checks may slow jstree a lot, so use only when needed
        "max_depth" : -2,
        "max_children" : -2,
        // I want only `drive` nodes to be root nodes
        // This will prevent moving or creating any other type as a root node
        "valid_children" : [ "drive" ],
        "types" : {
            // The default type
            "default" : {
                // I want this type to have no children (so only leaf nodes)
                // In my case - those are files
                "valid_children" : "none",
                // If we specify an icon for the default type it WILL OVERRIDE the theme icons
                "icon" : {
                    "image" : icon_url + "/file.png"
                }
            },
            // The `folder` type
            "folder" : {
                // can have files and other folders inside of it, but NOT `drive` nodes
                "valid_children" : [ "default", "folder" ],
                "icon" : {
                    "image" : icon_url + "/folder.png"
                }
            },
            // The `drive` nodes
            "drive" : {
                // can have files and folders inside, but NOT other `drive` nodes
                "valid_children" : [ "default", "folder" ],
                "icon" : {
                    "image" : icon_url + "/root.png"
                },
                // those prevent the functions with the same name to be used on `drive` nodes
                // internally the `before` event is used
                "start_drag" : false,
                "move_node" : false,
                "delete_node" : false,
                "remove" : false
            }
        }
    },
    .bind("create.jstree", function (e, data) {

    //if creating a root node
    if(!$(data.rslt.parent).attr("id")) var id = 1;
    //else get parent
    else var id = data.rslt.parent.attr("id").replace("node_","");
    $.post(
        ajaxurl,
        {
            "action" : "fma_create_node",
            "operation" : "create_node",
            "id" : id,
            "position" : data.rslt.position,
            "title" : data.rslt.name,
            "type" : data.rslt.obj.attr("rel")
        },
        function (r) {
            if(r.status) {
                $(data.rslt.obj).attr("id", "node_" + r.id);
            }
            else {
                $.jstree.rollback(data.rlbk);
            }
        },
        'json'
        );
})

any help would be well appreciated ;)
regards,
Daithi

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

黑寡妇 2024-12-01 07:49:23

解决了;)
指定要创建的节点类型的代码是:

this.create(obj, "last", {"attr" : {"rel" : "default"}});

所以现在 contextmenu 插件的代码如下所示:

        "contextmenu" : {
        items : { // Could be a function that should return an object like this one
            "create" : {
                "separator_before"  : false,
                "separator_after"   : true,
                "label"             : "Create",
                "action"            : false,
                "submenu" :{
                    "create_file" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "File",
                        action : function (obj) {
                            this.create(obj, "last", {"attr" : {"rel" : "default"}});
                        }
                    },
                    "create_folder" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "Folder",
                        action : function (obj) {                               
                            this.create(obj, "last", {"attr" : { "rel" : "folder"}});
                        }
                    }
                }
            }
        }
    },

对于任何菜鸟 - 如果您查看发布的问题中发布的代码,您应该能够看到它的去向。

solved it ;)
the code to specify the type of node to create is:

this.create(obj, "last", {"attr" : {"rel" : "default"}});

so now the code for the contextmenu plugin looks like this:

        "contextmenu" : {
        items : { // Could be a function that should return an object like this one
            "create" : {
                "separator_before"  : false,
                "separator_after"   : true,
                "label"             : "Create",
                "action"            : false,
                "submenu" :{
                    "create_file" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "File",
                        action : function (obj) {
                            this.create(obj, "last", {"attr" : {"rel" : "default"}});
                        }
                    },
                    "create_folder" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "Folder",
                        action : function (obj) {                               
                            this.create(obj, "last", {"attr" : { "rel" : "folder"}});
                        }
                    }
                }
            }
        }
    },

For any noobs - if you look at the code posted in the posted question you should be able to see where this goes.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文