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

Question

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

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"键也会出现同样的问题：当点击一个单元格时，我只想按Enter键，集中在单元格内外进行编辑。这在默认情况下可以正常工作，但在我的自定义单元格上不行。

总的来说，我希望导航和编辑的行为与默认单元格相同

Answer 1

您可以通过在ag网格组件上设置singleClick属性来实现这一点

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

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

您可以在编辑器中定义afterGuiAttached回调方法，该方法将由ag网格调用。

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

下面是一个工作示例：

https://plnkr.co/edit/okdFOpuuHJgv9Wtc

数字编辑器组件.ts

Answer 2

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

Answer 3

在添加singleClickEdit: true后，使用afterGuiAttached方法将输入字段设置为焦点

这是一个使用代码的例子

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;
}
afterGuiAttached() {
this.textInput.nativeElement.focus();
this.textInput.nativeElement.select();
}
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"
/>

Ag网格组件

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