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