在 Ag Grid 中覆盖 agAnimateShowChangeCellRenderer

Question

我有一个 ag 网格数据表，我正在更新这些值。我正在尝试使用agAnimateShowChangeCellRenderer它工作得很好，但我不能覆盖它的样式和超时。它是默认的 ag 网格动画样式。

 const columnDefs = [
  // these are the row groups, so they are all hidden (they are showd in the group column)
  {
    field: 'product',
    enableRowGroup: true,
    enablePivot: true,
    rowGroupIndex: 0,
    hide: true,
  },
  {
    field: 'portfolio',
    enableRowGroup: true,
    enablePivot: true,
    rowGroupIndex: 1,
    hide: true,
  },
  {
    field: 'book',
    enableRowGroup: true,
    enablePivot: true,
    rowGroupIndex: 2,
    hide: true,
  },

  // all the other columns (visible and not grouped)
  {
    field: 'batch',
    width: 100,
    cellClass: 'number',
    aggFunc: 'max',
    enableValue: true,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    field: 'current',
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    field: 'previous',
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: 'Change',
    valueGetter: changeValueGetter,
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: 'PL 1',
    field: 'pl1',
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: 'PL 2',
    field: 'pl2',
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: 'Gain-DX',
    field: 'gainDx',
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: 'SX / PX',
    field: 'sxPx',
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: '99 Out',
    field: '_99Out',
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: 'Submitter ID',
    field: 'submitterID',
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: 'Submitted Deal ID',
    field: 'submitterDealID',
    width: 200,
    aggFunc: 'sum',
    enableValue: true,
    cellClass: 'number',
    valueFormatter: numberCellFormatter,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },

  // some string values, that do not get aggregated
  { field: 'dealType', enableRowGroup: true, enablePivot: true },
  {
    headerName: 'Bid',
    field: 'bidFlag',
    enableRowGroup: true,
    enablePivot: true,
    width: 100,
  },
  { field: 'comment', editable: true },
];

有谁知道如何覆盖 agAnimateShowChangeCellRenderer 的超时？

当我单击更新样式显示但超时非常快。 请查看示例应用程序AnimateShowChange

Answer 1

如果我正确理解您的问题，您可以通过将这两个添加到默认网格选项中来覆盖动画超时和延迟，请参阅 GridOptions

  cellFlashDelay: X milliseconds,
  cellFadeDelay: X milliseconds

根据您覆盖 AG Grid 样式的方式，您可以通过在 css 中更改它来更新单元格闪烁颜色

.ag-row .ag-cell-data-changed {
   border: 1px solid red !important;
   background: transparent !important;
}

如果您有箭头指示数字的增加/减少，您可以使用这两个来覆盖它们的颜色

.ag-value-change-delta-up {
   color: lime !important;
 }

.ag-value-change-delta-down {
   color: $railpen-orange !important;
}

希望这可以帮助