angular(^4)-监控表格按键行为的问题

  以前开发的时候,用的是angular4,用ngGrid的时候要求对表格中的按键进行监控,具体以下:api

  1)上下左右,按方向移动位置(指编辑单元格);app

  2)enter,移动到下一个可编辑单元格;angular4

  3)一个数字输入框(cellEditorFramework)里双击空格键完成某个特定操做;this

注:由于后续了解到更多的便捷方法,特此将如下说明更新; spa

   解决办法:code

  一、光标移动blog

// 光标移动
  skipNextCell = (params: any) => {
    const previousCell = params.previousCellDef; const suggestedNextCell = params.nextCellDef; switch (params.key) { case KEY_DOWN: var nextRowIndex = previousCell.rowIndex - 1; if (nextRowIndex < 0) { return null; } else { return { rowIndex: nextRowIndex, column: previousCell.column, floating: previousCell.floating }; } case KEY_UP: var nextRowIndex = previousCell.rowIndex + 1; var renderedRowCount = gridOptions.api.getModel().getRowCount(); if (nextRowIndex >= renderedRowCount) { return null; } else { return { rowIndex: nextRowIndex, column: previousCell.column, floating: previousCell.floating }; } case KEY_LEFT: case KEY_RIGHT: return suggestedNextCell; default: throw "this will never happen, navigation is always on of the 4 keys above"; }
 }

 

  针对以上方法能够自定义上下左右键的行为;token

  二、事件监听事件

  

@HostListener('keydown', ['$event'])
  onkeydown($event) {
    if (this.allowKeyboardEvent) {
      const focusedCell = this.detailListOptions.api.getFocusedCell();
      if ($event.keyCode === Keycode.ENTER && this.detailListOptions.api && this.detailListOptions.api.getFocusedCell()) {
        // 把焦点移动到下一个可编辑单元格
        this.focusNextEditableCell();
      } else if (this.rowIndex > 0 && ($event.which === 190 || $event.which === 191) && focusedCell && focusedCell['column']['colId'] === 'remark') {
        if (this.timer > 1) {
          this.abstractKeyListen($event.which);
        }
        this.timer += 1;
        const that = this;
        setTimeout(function() {
          that.timer = 1;
        }, 300);
      }
    }
  }

hostListener能够用来设置快捷键;ip

相关文章
相关标签/搜索