如何强制重新渲染 ag-grid 中的一行？

Question

我在原始 javascript 中使用 ag-grid（即 - 没有 angular，没有 jquery）。网格显示流数据并在新行进入时动态更新。我的目标是用不同的颜色突出显示时间少于 20 秒的行。

我可以轻松地在最初呈现时逐行应用 css classes，但我不知道如何删除 css classes 当它们超过 20 秒时。这是我正在做的事情：

  class TickerController {
    constructor() {
      ...
      this.gridOptions = {
        rowClass: 'ticker--row',
        rowClassRules: {
          '-new-row': params =>
            (Date.now() - params.data.accepted_time) < NEW_ROW_THRESHOLD
        }
      };
      let tickerGrid = this._getElementById('ticker-grid');
      new agGrid.Grid(tickerGrid, this.gridOptions);
    }
    ...
  }

你可以在这里看到，我正在对所有行应用 ticker--row class，对新行应用 -new-row class。这确实会突出显示新行，但我不知道如何定期重新应用 rowClassRules。

当行不再是新行时，有人可以解释实现我删除 -new-row class 目标的正确方法吗？

Answer 1

plunker for demonstration

这是一种可以完成的方法：

在行中有一个数据值来保存是否高亮该行的信息
定义 rowClassRules 以查看该数据值
添加新行时，创建超时以在 20 秒内触发以更新此值。

var gridOptions = {
    ...
    rowClassRules: {
      'highlight': 'data.lessThan2'
    }
    ...
};

function onInsertRowAt2() {
    var newItem = createNewRowData();
    var res = gridOptions.api.updateRowData({add: [newItem], addIndex: 2});
    printResult(res);
    setTimeout(updateItems,2000,res)
}

function updateItems(rows) {
  var updatedRows = rows.add.map(row => row.data)
  updatedRows.map(e=>e.lessThan2 = false)
  gridOptions.api.updateRowData({update: updatedRows})
}

如何强制重新渲染 ag-grid 中的一行？

How do I force re-rendering of a row in ag-grid?

javascript

css

ag-grid