Ag-Grid: Ist es möglich, eine Zeile nach einem Timer zu gestalten, anstatt auf den Daten in der Zeile zu basieren?

Question

Ich muss nach einiger Zeit die Hintergrundfarbe einer Zeile ändern. Es gibt eine Spalte im Raster mit der Zeit in Sekunden und ich muss die Zeilenfarbe ändern, nachdem 50 % dieser Zeit vergangen sind.

Die Daten im Raster selbst ändern sich nicht, daher scheint die Verwendung von rowClassRules nicht zu funktionieren, da sich nichts ändert, um eine Auswertung der Daten anhand der Regeln auszulösen. Stattdessen dachte ich darüber nach, die Funktion setTimeout() mit einer Verzögerung zu verwenden, konnte aber nicht herausfinden, was im setTimeout-Block getan werden würde, um die CSS-Klasse auf den rowNode anzuwenden. Ich möchte keine Daten in der Zeile selbst ändern. Im schlimmsten Fall könnte ich wohl eine neue ausgeblendete Spalte hinzufügen und den Wert in dieser Spalte nach dem Timer ändern, aber das würde ich lieber vermeiden. Ich verwende React.

Ich versuche so etwas zu machen:

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)

Aber da es keine tatsächlich geänderten Daten in der Zeile gibt, wird die rowClassRules nicht dazu veranlasst, erneut ausgewertet zu werden, sobald ich die ID zum Warnungsarray hinzufüge.

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