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

时间:2011-07-17 23:08:55

标签: jquery jstree

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

这部分正在运行,问题在于附加到每个上下文菜单的功能。目前点击“文件”或“文件夹”调用: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'
        );
})

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

1 个答案:

答案 0 :(得分:9)

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

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

对于任何新手 - 如果你查看发布的问题中发布的代码,你应该能够看到它的位置。