我如何在 AG Grid 中输入 5M 或 10k 以便显示完整数字（即 5,000,000 或 10,000）

Question

我们的用户需要快速可靠的数据输入，因此他们想在 AG Grid 的数字单元格中输入 'M'，但已将其转换为数字。例如5M 将变成 5000。我不想将单元格类型更改为文本或尽可能做一个值格式化程序，因为那样会带来自己的问题。

Answer 1

您可以使用 Value Setter 设置编辑单元格后要输入到单元格中的值

  {
    headerName: 'B',
    field: 'b',
    valueSetter: function (params) {
      const THOUSAND = 'k';
      const MILLION = 'm';
      const lastCharacter = params.newValue
        .charAt(params.newValue.length - 1)
        .toLowerCase();
      if (lastCharacter == THOUSAND) {
        var newValInt = parseInt(params.newValue) * 1000;
      } else if (lastCharacter == MILLION) {
        var newValInt = parseInt(params.newValue) * 1000000;
      } else {
        var newValInt = parseInt(params.newValue);
      }

      var valueChanged = params.data.b !== newValInt;
      if (valueChanged) {
        params.data.b = newValInt;
      }
      return valueChanged;
    },
  },

查看下面的实现 plunkr

Answer 2

如果您将 AdapTable 与 AG Grid 一起使用，那么您可以使用 Shortcut Module。
这允许您在设计时或运行时定义快捷方式。因此，在这种情况下，您将定义一个快捷方式（'M' 表示乘以 1000），然后每次用户键入 5M 时，AdapTable 会将其转换为 5,000，但该列将保持为数字。

Shortcut: {
 Shortcuts: [
  {
    Scope: { DataTypes: ['Number'] },
    ShortcutKey: 'M',
    ShortcutOperation: 'Multiply',
    ShortcutValue: 1000,
  },
  ],
},

我如何在 AG Grid 中输入 5M 或 10k 以便显示完整数字（即 5,000,000 或 10,000）

How can I enter 5M or 10k into AG Grid so it shows the full number (i.e. 5,000,000 or 10,000)

ag-grid

ag-grid-react