在 ag 网格输入中只允许十进制值

Question

我是前端开发的新手。我想制作一个可编辑的 ag-grid 单元格，允许值范围为 0.00, 0.01, 0.02, ... to 100.00。

我使百分比列可编辑。现在它只允许数值。但我需要允许十进制值的范围为0.00, 0.01, 0.02, ... to 100.00。

屏幕截图：

StackBlitz url.

Answer 1

您可以在 ag-grid 中使用以下代码十进制输入文本。最小值为 0.00 最大值为 100.00

完整示例：https://stackblitz.com/edit/angular-ivy-t2uxxs?file=src%2Fapp%2Fag-grid-numeric-editor.ts

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

@Component({
  selector: 'app-numeric-editor-cell',
  template: `
    <input
      #i
      [value]="params.value"
      (keypress)="onKeyPress($event)"
      (keydown)="onKeyDown($event)"
      (keyup)="onKeyUP($event)"
      style="width: 100%; height: -webkit-fill-available;"
    />
  `
})
export class NumericEditorComponent implements AfterViewInit {
  @ViewChild('i') textInput;
  params: any;

  ngAfterViewInit() {
    setTimeout(() => this.textInput.element.nativeElement.focus());
  }

  agInit(params: any): void {
    this.params = params;
  }
  getValue() {
    return this.textInput * 2;
  }
  onKeyUP(event) {}
  onKeyPress(event) {}

  onKeyDown(event) {
    if (
      event.keyCode === 8 ||
      event.keyCode === 46 ||
      event.keyCode === 37 ||
      event.keyCode === 39
    ) {
      return true;
    }
    if (event.target.value.length >= 6) {
      event.preventDefault();
    }
    if (event.key == '.') {
      if (event.target.value.includes('.')) {
        event.preventDefault();
      }
    } else if (!isNumeric(event)) {
      event.preventDefault();
    } else if (event.target.value + event.key > 100.01) {
      event.preventDefault();
    } else if (event.target.value.includes('.') && event.key != '.') {
      let myarr = (event.target.value + event.key).split('.');
      if (myarr[1].length > 2) {
        event.preventDefault();
      }
    }
    function isNumeric(ev) {
      return /\d/.test(ev.key);
    }
  }
}