Ag-Grid: Adakah mungkin untuk menggayakan baris pada pemasa dan bukannya berdasarkan data dalam baris?

Question

Saya perlu menukar warna latar belakang baris selepas beberapa ketika. Terdapat lajur dalam grid dengan masa dalam saat dan saya perlu menukar warna baris selepas 50% masa itu berlalu.

Data dalam grid itu sendiri tidak berubah, jadi menggunakan rowClassRules nampaknya tidak berfungsi kerana tiada perubahan untuk mencetuskan data untuk dinilai mengikut peraturan. Sebaliknya, saya terfikir untuk menggunakan fungsi setTimeout() dengan kelewatan, tetapi tidak dapat memikirkan apa yang akan dilakukan di dalam blok setTimeout untuk menggunakan kelas css pada rowNode. Saya tidak mahu menukar sebarang data dalam baris itu sendiri. Senario kes terburuk, saya rasa saya boleh menambah lajur tersembunyi baharu dan menukar nilai dalam lajur itu selepas pemasa, tetapi saya lebih suka mengelakkannya. Saya menggunakan React.

Saya cuba melakukan sesuatu seperti ini:

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)

Tetapi memandangkan tiada data berubah sebenar dalam baris, rowClassRules tidak dicetuskan untuk dinilai semula sebaik sahaja saya menambah ID pada tatasusunan amaran.

Answer 1

Sangat boleh.

Ideanya adalah untuk mengemas kini data grid untuk menggunakan beberapa gaya yang dipratentukan.

Sebagai contoh, kami mengemas kini medan umur setiap rekod kepada 100 selepas 3 saat. Menurut rowClassRules kami, sebarang data dengan umur lebih daripada 98 tahun akan menjadi calon untuk gaya kami yang telah ditetapkan.

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)
}

Tengok si bodoh ni

https://plnkr.co/plunk/wVt8QvavUM1UrblC