jsTree и контекстное меню: изменить элементы

19

Я использую jsTree 3.0.0 , и мне нужно изменить контекст одним из следующих способов:

  • Измените язык ярлыков для элементов по умолчанию, отключите некоторые элементы по умолчанию и добавьте новые элементы.
  • Перепишите все элементы и привяжите к некоторым новым элементам функцию create, rename и delete.

Я попробовал несколько подходов, но ничего не получилось. Например, это возвращает Uncaught TypeError: Object [object global] has no method 'create' , когда я нажимаю на create.

"contextmenu":{
    "items": function($node) {
        return {
            createItem : {
                 "label" : "Create New Branch",
                 "action" : function(obj) { this.create(obj); alert(obj.text())},
                 "_class" : "class"
            },
            renameItem : {
                 "label" : "Rename Branch",
                 "action" : function(obj) { this.rename(obj);}
            },
            deleteItem : {
                 "label" : "Remove Branch",
                 "action" : function(obj) { this.remove(obj); }
            }
        };
    }
},

Если я попытаюсь добавить один элемент, как в следующем примере, я потеряю пункты меню по умолчанию:

items : { 
    "create_folder" : {
        "separator_before" : false,
        "separator_after" : false,
        "label" : "Create Folder",
        "action" : function (obj) { alert(1); /* this is the tree, obj is the node */ }
    }
}

Где я ошибаюсь?

    
задан sara_thepot 13.01.2014 в 17:20
источник

4 ответа

35

Решено:

"contextmenu":{         
    "items": function($node) {
        var tree = $("#tree").jstree(true);
        return {
            "Create": {
                "separator_before": false,
                "separator_after": false,
                "label": "Create",
                "action": function (obj) { 
                    $node = tree.create_node($node);
                    tree.edit($node);
                }
            },
            "Rename": {
                "separator_before": false,
                "separator_after": false,
                "label": "Rename",
                "action": function (obj) { 
                    tree.edit($node);
                }
            },                         
            "Remove": {
                "separator_before": false,
                "separator_after": false,
                "label": "Remove",
                "action": function (obj) { 
                    tree.delete_node($node);
                }
            }
        };
    }
}
    
ответ дан sara_thepot 14.01.2014 в 11:42
источник
  • Я хочу получить обновленные данные при любых модификациях. Как я мог достичь. ? –  Hashir Hussain 29.10.2015 в 14:44
  • при использовании вашего кода, Uncaught TypeError: tree.create_node не является ошибкой функции для действия create –  A.B.Developer 27.03.2016 в 11:29
  • Скорее всего, вы забыли изменить «#tree» на идентификатор вашего дерева в html в этой строке: var tree = $ («# tree»). jstree (true); –  Виталий Белоусов 29.07.2017 в 16:48
5

для jstree v3. + (i test 3.2.1) этот пример работает

"contextmenu":{
                    "items": function () {
                        return {
                            "Create": {
                                "label": "Create",
                                "action": function (data) {
                                    var ref = $.jstree.reference(data.reference);
                                        sel = ref.get_selected();
                                    if(!sel.length) { return false; }
                                    sel = sel[0];
                                    sel = ref.create_node(sel, {"type":"file"});
                                    if(sel) {
                                        ref.edit(sel);
                                    }

                                }
                            },
                            "Rename": {
                                "label": "Rename",
                                "action": function (data) {
                                    var inst = $.jstree.reference(data.reference);
                                        obj = inst.get_node(data.reference);
                                    inst.edit(obj);
                                }
                            },
                            "Delete": {
                                "label": "Delete",
                                "action": function (data) {
                                    var ref = $.jstree.reference(data.reference),
                                        sel = ref.get_selected();
                                    if(!sel.length) { return false; }
                                    ref.delete_node(sel);

                                }
                            }
                        };
                    }
                },
    
ответ дан Greg Hmhmm 01.09.2015 в 12:38
источник
  • ваши действия по переименованию и удалению работают нормально, но действие не работает должным образом. когда создается новый узел, тогда вы хотите создать другой для другого, новый узел добавлен к ранее выбранному узлу. –  A.B.Developer 27.03.2016 в 11:24
3

Обновлен код последней версии

"contextmenu":{         
    "items": function($node) {
        var tree = $("#tree").jstree(true);
        return {
            "Create": {
                "separator_before": false,
                "separator_after": false,
                "label": "Create",
                "action": function (obj) { 
                    $node = tree.jstree('create_node', $node);
                    tree.jstree('edit', $node);
                }
            },
            "Rename": {
                "separator_before": false,
                "separator_after": false,
                "label": "Rename",
                "action": function (obj) { 
                    tree.jstree('edit', $node);
                }
            },                         
            "Remove": {
                "separator_before": false,
                "separator_after": false,
                "label": "Remove",
                "action": function (obj) { 
                    tree.jstree('delete_node', $node);
                }
            }
        };
    }
}
    
ответ дан Askar Amirov 20.05.2016 в 01:27
источник
2

Более читаемый пример

 var tree = $('#treeDiv').jstree({
        "plugins": ["contextmenu"],
        "contextmenu": {
            "items": function ($node) {
                return {
                    "create": {
                        "separator_before": false,
                        "separator_after": false,
                        "label": "Create",
                        "action": function (obj) {
                            // action code here
                        }
                    }
                };
            }
        }
    });
    
ответ дан Irfan Ashraf 29.06.2017 в 12:00
источник