Question

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

我可以在最初渲染时逐行地逐行应用css类，但我无法弄清楚如何在超过20秒时删除css类。这就是我在做的事情：

typedef struct curandStateXORWOW curandState_t;
typedef struct curandStateXORWOW curandState;

您可以在此处看到我将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类应用于新行。这会突出显示新行，但我不知道如何定期重新应用-new-row。

有人可以解释在行不再是新行时实现删除rowClassRules类的目标的正确方法吗？

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中的行？

1 个答案: