jsTree：退出編輯模式？

我在當前的Angular 2項目中使用了jsTree插件。一切正常，但我現在試圖添加特定的行爲：當用戶正在編輯一個節點，然後他按Tab鍵時，我想要自動添加一個新的空兄弟節點直接在他正在編輯的節點下，並在其上啓用編輯模式，以便他可以繼續打字並有效使用Tab鍵作爲鍵盤快捷鍵，以快速在同一級別創建大量節點。jsTree：退出編輯模式？

我已經嘗試添加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），但是這些對我來說都沒有用處。

這對我的優先級沒有太大的要求，它更好，但我真的好奇我怎麼能實現這個..有沒有人有任何想法？

來源

2017-02-17 Jort

你有一個想法如何將jstree添加到angular-cli項目？你有沒有用你的jstree做什麼的例子？請。 – IamStalker

您將不得不監視在開始編輯節點時彈出的輸入上的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); 
    } 

})

來源

2017-02-17 14:52:17

非常感謝您的詳細解答和小提琴，這很有道理！ – Jort

jsTree：退出編輯模式？

回答

相關問題