jsTree: переход из режима редактирования?

Question

Я использую плагин jsTree в моем текущем проекте Angular 2. Все работает хорошо, но теперь я пытаюсь добавить определенное поведение: Когда пользователь редактирует узел, и он нажимает клавишу табуляции, я хочу автоматически добавить новый пустой узел для сиблинга непосредственно под узлом, который он редактировал, и включить режим редактирования на нем, чтобы он мог продолжать вводить и эффективно использовать клавишу табуляции в качестве сочетания клавиш для быстрого создания большого количества узлов на одном уровне.

Я попытался добавить KeyUp слушателя событий для DIV высокого уровня, содержащего jsTree:

(keyup)="onKeyUp($event)" 

Функция OnKeyUp:

onKeyUp(e: any) { 
    if (e.code === 'Tab' && this.renamingNode) { 
     // pressed tab while renaming subitem, insert new sibling item and start editing 
    } 
} 

Наконец, (упрощенный) код для редактирования jsTree :

let scope = this; 
$(this.currentTree).jstree().create_node(selectedItem, { 'text': '', 'type': 'value' }, 'last', function callback(e: any) { 
    scope.renamingNode = true; 
    // enable renaming of node 
    $(scope.currentTree).jstree().edit(e, null, function callback(addedNode: any, status: boolean, cancelled: boolean) { 
     scope.renamingNode = false; 
     // code to add addedNode to database using service 
    } 
} 

Это не работает должным образом. При отладке я вижу, что каждый ключ фиксируется, когда пользователь переименовывает узел, но нажатие кнопки «tab» похоже каким-то образом подавляется jsTree. Функция onKeyUp не запускается, вместо этого происходит поведение по умолчанию jsTree, переименование узла и его выбор. Я также рассмотрел различные параметры функции обратного вызова jsTree.edit (nodeObject, статус, отменено), но ни один из них не кажется мне полезным в моем случае.

Это не слишком высоко для моего приоритета в прошлом, это более приятный, но мне действительно интересно, как я мог реализовать это. Есть ли у кого-нибудь идеи?

Answer 1

Вам нужно будет следить за клавишей табуляции на входе, который появляется при запуске редактирования узла, как показано ниже. Также проверьте демо - Fiddle Demo

$(document).on('keydown', '.jstree-rename-input', function(e){ 

    if (e.keyCode == '9') { 
    var focusedNodeId = $('#jstree').jstree()._data.core.focused, 
      focusedNode = $('#jstree').jstree().get_node('#'+focusedNodeId); 
     newNode = $("#jstree").jstree('create_node', '#'+focusedNodeId); 

     // simulate timeout to ensure new node is in the DOM and is visible 
     // before we start editing it 
     setTimeout(function(){ 
      $("#jstree").jstree('edit', newNode); 
     }, 0); 
    } 

})