zoukankan      html  css  js  c++  java
  • angular(^4)-监控表格按键行为的问题

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

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

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

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

    注:因为后续了解到更多的便捷方法,特此将以下说明更新; 

       解决办法:

      1、光标移动

    // 光标移动
      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";
          }
     }

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

      2、事件监听

      

    @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可以用来设置快捷键;

  • 相关阅读:
    缓存使用的最佳实践
    如何科学的设置线程池
    双检查锁失效
    Minor GC、Major GC和Full GC之间的区别
    full gc频繁的分析及解决案例
    MySQL的并发控制与加锁分析
    全面理解Java内存模型
    JAVA中MAP转LIST
    java 编码转换
    自定义VIew基础
  • 原文地址:https://www.cnblogs.com/skylen/p/9242535.html
Copyright © 2011-2022 走看看