如何更改 ag-grid 单元格的颜色以动态更改数据

Question

我有一个从动态变化的数据加载的表。它每 5 秒刷新一次。我使用这个例子使用 ag-grid：https : //www.ag-grid.com/javascript-grid-sorting/index.php

是否可以更改其值发生变化的单元格的颜色，例如假设单元格值为 100 并且它变为（小于此值，即 <100），因此将单元格设为红色，使其变得更大，使其变为绿色。我试图用这个例子来做：https : //www.ag-grid.com/javascript-grid-cell-styling/index.php

但我无法理解如何做到这一点。

更新：我是这样做的，但它没有改变颜色：

var columnDefs = [
    {headerName: "Arr Px Slippage", field: "total_wt_arr_slp", width: 100, newValueHandler: compareValues},
    {headerName: "IVWAP Slippage", field: "total_wt_ivwap_slp", width: 100}


];

function compareValues(params) {
    if (params.oldValue > params.newValue){ 
    return {color: 'green', backgroundColor: 'black'};
    console.log(params.newValue);

    }
    if (params.oldValue < params.newValue){ 
    return {color: 'red', backgroundColor: 'black'};
    }
}

Answer 1

这是代码片段，您可以在其中更改 ag 网格单元格文本的颜色和背景颜色。

 var colDef = {
            name: 'Dynamic Styles',
            field' 'dummyfield',
            cellStyle: function(params) {
                if (params.node.value=='Police') {
        //Here you can check the value and based on that you can change the color
                    //mark police cells as red
                    return {color: 'red', backgroundColor: 'green'};
                } else {
                    return null;
                }
            }
        }

Answer 2

看起来您应该能够使用newValueHandler每列的属性。

来自文档：

如果您想使用简单的文本编辑，但想在插入行之前以某种方式格式化结果，那么您可以向列提供一个 newValueHandler 。这将允许您向该值添加额外的验证或对话。

newValueHandler 提供了一个具有属性的 params 对象：

• 节点：有问题的网格节点。
• data：相关的行数据。
• oldValue：如果“field”位于列定义中，则包含编辑前数据中的值。
• newValue：输入到默认编辑器中的字符串值。
• rowIndex：虚拟化行的索引。
• colDef：列定义。
• context：在 gridOptions 中设置的上下文。api：对 ag-Grid API 的引用。

所以大致如下：

var colDefs = [{
    header: 'comparing to previous val'
    newValueHandler: compareValues
}]

function compareValues(params){
    if (params.oldValue > params.newValue){ //make it red}
    if (params.oldValue < params.newValue){ //make it green}
}