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

Posted 2023-03-28

【中文标题】在 ag 网格输入中只允许十进制值

【英文标题】：allow only decimal value in ag grid input

【发布时间】：2021-10-22 23:41:44

【问题描述】：

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

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

屏幕截图：

StackBlitz url.

【问题讨论】：

当你说“现在它只允许数值”时，你的意思是它只允许 integer 值（换句话说，整数）？

【参考方案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);