Question

我对ag-grid上的某些列使用了自定义单元格编辑器，以进行用户输入验证，以防止非数字输入。我的组件类：

import { Component, ViewChild } from '@angular/core';


const KEY_TAB = 9;
const ENTER = 13;
const ARROW_RIGHT = 39;
const ARROW_LEFT = 37;

@Component({
  selector: 'app-numeric-editor',
  templateUrl: './numeric-editor.component.html',
  styleUrls: ['./numeric-editor.component.scss']
})
export class NumericEditorComponent {
  @ViewChild('i') textInput;
  params;

  agInit(params: any): void {
    this.params = params;
  }

  getValue() {
    return this.textInput.nativeElement.value;
  }

  onKeyPress(event) {
    if (!isNumeric(event)) {
      event.preventDefault();
    }

    function isNumeric(ev) {
      return /\d/.test(ev.key);
    }
  }

  onKeyDown(event) {
    if (event.keyCode === ARROW_RIGHT ||
        event.keyCode === ARROW_LEFT ||
        event.keyCode === KEY_TAB 
        
      ) {
      event.stopPropagation();
    }
  }

}

组件模板：

<input
  #i
  [value]="params.value"
  (keypress)="onKeyPress($event)"
  (keydown)="onKeyDown($event)"
  class="ag-theme-alpine-dark"
/>

现在，我的自定义单元格存在一些编辑问题。要编辑普通/默认单元格，我可以（单次）单击它并开始编写。

这不适用于我的自定义单元格。在自定义单元格上，我首先必须双击以突出显示该行，然后单击该单元格进行编辑。这有点不方便。

如何使它正常运行/默认？

同样的问题是按回车键：单击某个单元格时，我只想按Enter键即可将焦点移入和移出该单元格进行编辑。默认情况下，此方法工作正常，但不适用于我的自定义单元格。

总体而言，我希望导航和编辑的行为与默认单元格相同。

Answer 1

GridOptions具有属性singleClickEdit，允许单击以开始编辑，而不是双击https://www.ag-grid.com/javascript-grid-cell-editing/

Answer 2

您可以通过在ag-grid组件上设置singleClick属性来实现此目的

<ag-grid-angular
 //...
 [singleClickEdit]="true"
 </ag-grid-angular>

如果您使用的是自定义编辑器，则可能需要在将GUI附加到DOM之后集中输入。

您可以在编辑器中定义afterGuiAttached回调方法，此方法将由ag-grid调用。

  afterGuiAttached() {
    this.textInput.nativeElement.focus();
    this.textInput.nativeElement.select();
  }

这是一个可行的示例：

https://plnkr.co/edit/okdFOpuuHJgv9Wtc

numeric-editor.component.ts

如何使用自定义单元格编辑器在单元格上启用单击编辑？

2 个答案: