Angular Ag-Grid中编辑数字单元格时能否自动添加千位分隔符？

当然可以实现，下面是具体的实现步骤和代码示例：

核心思路 #

通过自定义单元格编辑器控制输入时的格式渲染，同时严格区分「显示用带分隔符的字符串」和「表格存储的原始数字值」，避免数据源被字符串类型污染。

具体实现步骤 #

1. 创建自定义数字输入编辑器组件 #

生成一个Angular组件，实现Ag-Grid的AgGridEditorComponent接口，处理输入格式化逻辑：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { AgGridEditorComponent } from 'ag-grid-angular';

@Component({
  template: `<input #input type="text" (input)="onInputChange()" (blur)="onBlur()" class="ag-input-field-input ag-text-field-input" />`
})
export class NumberInputEditorComponent implements AgGridEditorComponent {
  @ViewChild('input') input!: ElementRef<HTMLInputElement>;
  private params: any;
  private rawNumber: number = 0;

  agInit(params: any): void {
    this.params = params;
    // 初始化时将原始数字转为带千位分隔符的字符串显示
    this.input.nativeElement.value = this.formatToThousands(params.value);
    this.rawNumber = params.value || 0;
  }

  getValue(): number {
    // 返回原始数字，确保表格存储数值类型
    return this.rawNumber;
  }

  isCancelBeforeStart(): boolean {
    return false;
  }

  isCancelAfterEnd(): boolean {
    return false;
  }

  onInputChange(): void {
    // 过滤输入中的非数字字符，保留原始数值
    const cleanValue = this.input.nativeElement.value.replace(/[^0-9]/g, '');
    this.rawNumber = cleanValue ? parseInt(cleanValue, 10) : 0;
    // 重新渲染带千位分隔符的格式
    this.input.nativeElement.value = this.formatToThousands(this.rawNumber);
  }

  onBlur(): void {
    // 失焦时确保格式统一
    this.input.nativeElement.value = this.formatToThousands(this.rawNumber);
  }

  private formatToThousands(num: number): string {
    // 千位分隔符格式化，可切换地区码适配不同格式（如中文用'zh-CN'）
    return num.toLocaleString('en-US');
  }
}

2. 配置Ag-Grid列定义 #

在表格组件中，为数字列指定自定义编辑器，同时配置cellRenderer保证查看和编辑的格式统一：

import { Component } from '@angular/core';
import { ColDef } from 'ag-grid-community';
import { NumberInputEditorComponent } from './number-input-editor.component';

@Component({
  selector: 'app-number-grid',
  template: `<ag-grid-angular
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [frameworkComponents]="frameworkComponents"
    style="width: 100%; height: 600px;"
  ></ag-grid-angular>`
})
export class NumberGridComponent {
  rowData = [
    { id: 1, sales: 123456 },
    { id: 2, sales: 7890123 },
    { id: 3, sales: 45678 }
  ];

  columnDefs: ColDef[] = [
    { field: 'id', headerName: '序号', width: 100 },
    {
      field: 'sales',
      headerName: '销售额',
      width: 200,
      editable: true,
      // 单元格显示时格式化数字
      cellRenderer: (params: any) => params.value?.toLocaleString('en-US') || '0',
      // 指定自定义编辑器
      cellEditor: 'numberInputEditor'
    }
  ];

  // 注册自定义组件
  frameworkComponents = {
    numberInputEditor: NumberInputEditorComponent
  };
}

3. 模块中声明组件 #

确保在Angular模块中声明并导出自定义编辑器：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';
import { NumberGridComponent } from './number-grid.component';
import { NumberInputEditorComponent } from './number-input-editor.component';

@NgModule({
  imports: [BrowserModule, AgGridModule],
  declarations: [NumberGridComponent, NumberInputEditorComponent],
  bootstrap: [NumberGridComponent]
})
export class AppModule { }

关键注意事项 #

• 始终分离「显示格式」和「存储值」，表格数据源必须保持数字类型，避免后续计算出错。
• 可通过修改toLocaleString的地区参数，适配不同语言环境的分隔符格式。
• 该实现基于Ag-Grid官方文档中「单元格编辑器」的自定义扩展能力，可根据需求扩展更多输入校验逻辑。

内容的提问来源于stack exchange，提问作者developer