Ag-Grid：是否可以在计时器上设置行的样式，而不是基于行中的数据？

Question

我需要在一段时间后更改行的背景颜色。网格中有一列的时间以秒为单位，我需要在该时间过去 50% 后更改行颜色。

网格中的数据本身并没有改变，因此使用 rowClassRules 似乎不起作用，因为不会发生任何更改来触发根据规则评估数据。相反，我想到使用带有延迟的 setTimeout() 函数，但无法弄清楚 setTimeout 块内部会执行什么操作来将 css 类应用到 rowNode。我不想更改行本身中的任何数据。最糟糕的情况是，我想我可以添加一个新的隐藏列并在计时器之后更改该列中的值，但我宁愿避免这种情况。我正在使用 React。

我尝试做这样的事情：

let red_warnings = [] 

let yellow_warnings = []

const rowClassRules = {
    '.red': (params) => { return red_warnings.includes(params.data.Id) }, 
    '.yellow': (params) => { return yellow_warnings.includes(params.data.Id) } 
}

<AgGridReact
    rowClassRules={rowClassRules}
/>

// when a new row is added
setTimeout(() => {
    yellow_warnings.push(Id)
}, 1000 * Timeout * 0.5)

setTimeout(() => {
    red_warnings.push(Id)
}, 1000 * Timeout * 0.8)

但是由于行中没有实际更改的数据，因此一旦我将 ID 添加到警告数组中，就不会触发重新评估 rowClassRules。

Answer 1

这是绝对可能的。

这个想法是更新网格数据以应用一些预定义的样式。

例如，我们在 3 秒后将每条记录的年龄字段更新为 100。根据我们的 rowClassRules，任何年龄大于 98 的数据都将成为我们预定义样式的候选者。

function onFirstDataRendered(params) {
  setTimeout(function () {
    params.api.forEachNode((node) => {
      var newData = {
        ...node.data,
        person: {
          ...node.data.person,
          age: 100,
        },
      }
      node.data = newData
      params.api.redrawRows()
    })
  }, 3000)
}

看看这个笨蛋

https://plnkr.co/plunk/wVt8QvavUM1UrblC