我在当前的 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),但这些参数似乎对我的情况都没有用。
最后这对我来说并不是太高的优先级,它更像是一个很好的东西,但我真的很好奇我如何实现这个..有人有什么想法吗?
最佳答案
您必须监视开始编辑节点时弹出的输入上的 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);
}
})
关于javascript - jsTree:跳出编辑模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42298517/