jsTree：跳出编辑模式？

Question

我在当前的 Angular 2 项目中使用 jsTree 插件。一切正常，但我现在正在尝试添加特定行为：当用户正在编辑节点并按下 tab 键时，我想在他正在编辑的节点正下方自动添加一个新的空兄弟节点，并在其上启用编辑模式，以便他可以继续键入并有效地使用 tab 键作为在同一级别快速创建大量节点的键盘快捷键。

我已经尝试将 keyup 事件侦听器添加到包含 jsTree 的高级 div:

(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、status、cancelled），但其中 none 对我来说似乎很有用。

这不是我最后的优先级，它更像是一个不错的选择，但我真的很好奇我该如何实现它。有人有什么想法吗？

Answer 1

当您开始编辑一个节点时，您将需要在弹出的输入中监视 Tab 键，如下所示。另请查看演示 - 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);
   }

})

jsTree：跳出编辑模式？

jsTree: tabbing out of edit mode?

javascript

jquery

jstree

dom-events

angular