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

  • 相关阅读:
    android发送/接收json数据
    Android 图文数据JSON解析
    Android中View绘制流程以及invalidate()等相关方法分析
    Android WebView常见问题及解决方案汇总
    非递归方法的堆排序实现
    快速排序算法
    从导数谈起
    Linux网络编程8——对TCP与UDP的简易封装
    Linux网络编程7——使用TCP实现双方聊天
    Linux网络编程6——使用TCP实现文件服务器
  • 原文地址:https://www.cnblogs.com/skylen/p/9242535.html
Copyright © 2011-2022 走看看