1

jsTree の contextmenu を翻訳する必要があります (右ボタンをクリックすると表示されます)。現時点では、新しいファイルを作成し、jstree.contextmenu.pl.jsコードをコピーして貼り付け、jquery.jstree.js独自の変更を加えています。それは機能しますが、それが最良の選択肢であるかどうかはわかりません。

    $.jstree.plugin("contextmenu", {
    __init : function () {
        this.get_container()
            .delegate("a", "contextmenu.jstree", $.proxy(function (e) {
                    e.preventDefault();
                    if(!$(e.currentTarget).hasClass("jstree-loading")) {
                        this.show_contextmenu(e.currentTarget, e.pageX, e.pageY);
                    }
                }, this))
            .delegate("a", "click.jstree", $.proxy(function (e) {
                    if(this.data.contextmenu) {
                        $.vakata.context.hide();
                    }
                }, this))
            .bind("destroy.jstree", $.proxy(function () {
                    // TODO: move this to descruct method
                    if(this.data.contextmenu) {
                        $.vakata.context.hide();
                    }
                }, this));
        $(document).bind("context_hide.vakata", $.proxy(function () { this.data.contextmenu = false; }, this));
    },
    defaults : { 
        select_node : false, // requires UI plugin
        show_at_node : true,
        items : { // Could be a function that should return an object like this one
            "create" : {
                "separator_before"  : false,
                "separator_after"   : true,
                "label"             : "Utwórz nowy",
                "action"            : function (obj) { this.create(obj); }
            },
            "rename" : {
                "separator_before"  : false,
                "separator_after"   : false,
                "label"             : "Zmień nazwę",
                "action"            : function (obj) { this.rename(obj); }
            },
            "remove" : {
                "separator_before"  : false,
                "icon"              : false,
                "separator_after"   : false,
                "label"             : "Usuń",
                "action"            : function (obj) { if(this.is_selected(obj)) { this.remove(); } else { this.remove(obj); } }
            },
            "ccp" : {
                "separator_before"  : true,
                "icon"              : false,
                "separator_after"   : false,
                "label"             : "Edytuj",
                "action"            : false,
                "submenu" : { 
                    "cut" : {
                        "separator_before"  : false,
                        "separator_after"   : false,
                        "label"             : "Wytnij",
                        "action"            : function (obj) { this.cut(obj); }
                    },
                    "copy" : {
                        "separator_before"  : false,
                        "icon"              : false,
                        "separator_after"   : false,
                        "label"             : "Kopiuj",
                        "action"            : function (obj) { this.copy(obj); }
                    },
                    "paste" : {
                        "separator_before"  : false,
                        "icon"              : false,
                        "separator_after"   : false,
                        "label"             : "Wklej",
                        "action"            : function (obj) { this.paste(obj); }
                    }
                }
            }
        }
    },
    _fn : {
        show_contextmenu : function (obj, x, y) {
            obj = this._get_node(obj);
            var s = this.get_settings().contextmenu,
                a = obj.children("a:visible:eq(0)"),
                o = false,
                i = false;
            if(s.select_node && this.data.ui && !this.is_selected(obj)) {
                this.deselect_all();
                this.select_node(obj, true);
            }
            if(s.show_at_node || typeof x === "undefined" || typeof y === "undefined") {
                o = a.offset();
                x = o.left;
                y = o.top + this.data.core.li_height;
            }
            i = obj.data("jstree") && obj.data("jstree").contextmenu ? obj.data("jstree").contextmenu : s.items;
            if($.isFunction(i)) { i = i.call(this, obj); }
            this.data.contextmenu = true;
            $.vakata.context.show(i, a, x, y, this, obj, this._get_settings().core.rtl);
            if(this.data.themes) { $.vakata.context.cnt.attr("class", "jstree-" + this.data.themes.theme + "-context"); }
        }
    }
});

どのように正しく行うのですか？

4

2 に答える 2

3

コンテキスト メニュー オプションが定義されている jstree を変更する必要はまったくありません。以下に示すように、特定のツリー インスタンスのメニューを変更できます。

    $("#jstreediv").jstree({
    contextmenu:{
    items:{
               "create" : {
                    "separator_before"  : false,
                    "separator_after"   : true,
                    "label"             : "Utwórz nowy",
                    "action"            : function (obj) { this.create(obj); }
                },
                "rename" : {
                    "separator_before"  : false,
                    "separator_after"   : false,
                    "label"             : "Zmień nazwę",
                    "action"            : function (obj) { this.rename(obj); }
                },
                "remove" : {
                    "separator_before"  : false,
                    "icon"              : false,
                    "separator_after"   : false,
                    "label"             : "Usuń",
                    "action"            : function (obj) { 
                                               if(this.is_selected(obj)) {
                                                     this.remove(); 
                                               } 
                                               else {
                                                   this.remove(obj); 
                                               } 
                                           }
               }
      }
  },
  plugins: ["contextmenu"]

});

または、このコンテキスト メニュー構成全体を別の新しいファイルに移動する場合は、以下に示すように、コンテキスト メニュー項目を返す関数を記述します。

    function yourContextMenu() {

        var items = {
                        "create" : {
                            "separator_before"  : false,
                            "separator_after"   : true,
                            "label"             : "Utwórz nowy",
                            "action"            : function (obj) { this.create(obj); }
                        },
                        "rename" : {
                            "separator_before"  : false,
                            "separator_after"   : false,
                            "label"             : "Zmień nazwę",
                            "action"            : function (obj) { this.rename(obj); }
                        },
                        "remove" : {
                            "separator_before"  : false,
                            "icon"              : false,
                            "separator_after"   : false,
                            "label"             : "Usuń",
                            "action"            : function (obj) { 
                                                       if(this.is_selected(obj)) {
                                                             this.remove(); 
                                                       } 
                                                       else {
                                                           this.remove(obj); 
                                                       } 
                                                   }
                       }
                      //add as many context menu items as you want here
        };

        return items;
}

この関数を JavaScript ファイルに保存 somename.js し、ページに含めます。

<script src="somename.js"></script>

そして、あなたのツリーは以下のようでなければなりません

$("#jstreediv").jstree({
        contextmenu:{
           items: yourContextMenu()
        },
        plugins: ["contextmenu"]
});
于 2013-06-12T04:40:25.800 に答える