jsTree:跳出编辑模式?

时间:2017-02-17 12:54:30

标签: javascript jquery angular javascript-events jstree

我在当前的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),但在我的情况下,这些参数似乎都没用。

这在我的优先级上并不是太高了,它更加令人愉快,但我真的很好奇我是如何实现这一点的。有没有人有任何想法?

1 个答案:

答案 0 :(得分: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);
   }

})