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

Posted 2023-03-28

【中文标题】如何更改 ag-grid 单元格的颜色以动态更改数据

【英文标题】：How to change color of ag-grid cells for dynamically changing data

【发布时间】：2017-01-31 14:19:45

【问题描述】：

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

是否可以更改值发生变化的单元格的颜色，例如假设单元格值为 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';
    

【问题讨论】：

如果您看到，ag-grid 文档有一个页面用于刷新 (ag-grid.com/javascript-grid-refresh) 功能。第二个例子是你可以看看的。如果值大于 20，则 Total 列中值的颜色会根据行中其他列的总和而改变。我无法解决的问题是如何动态应用这些类。

【参考方案1】：

实际上，我刚刚开始工作。 您需要在要更改颜色的每一列上使用“cellClassRules”属性。比如：

headerName: "header", field:"field",suppressMenu: true, volatile: true, suppressMovable: true, cellClassRules: 'bold-and-red': 'x>1' 

这里规则中的“x”是列的值。 此外，您需要将您的列标记为 voaltile: true。 要使易失性字段动态更改，您在刷新数据时需要api.softRefreshView()。 css 类“bold-and-red”可以在您的 html 文件中定义，例如： .bold-and-red 颜色：深红色； 字体粗细：粗体；

【讨论】：

这是一个很好的答案，除了 softRefreshView() 已被弃用，所以我使用了 .refreshCells()

【参考方案2】：

这是代码的 sn-p，您可以在其中更改 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;
                
            
        

【参考方案3】：

你写的大部分是正确的：

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';

Jarod Moser 为您提供的有关此回调的 params 对象的信息非常准确且重要。

您遇到的问题是您尝试return style，但您不能这样做。您需要访问 html 元素（包含 <div>）并在其上设置一个类（使用您想要的样式定义类）。我在 ag-grid 中完成了此操作，我可以访问 params.eGridCell 但在此特定回调中 eGridCell 不可用。如果我找到到达<div> 的好方法，我会用我找到的内容编辑这篇文章。

编辑 - 附加信息

我认为我不会将 newValueHandler 用于您正在尝试做的事情。

你没有说你是如何更新数据的，但你确实说它可能每 5 秒更新一次。

无论您决定更新单元格，您都可以向 rowData 对象添加属性“origValue”，在更新单元格值之前，将当前值设置为“origValue”，然后将新值设置为 value。那么......您可以使用cellClass 列属性，使用回调函数，并将新值与“origValue”进行比较并返回所需的样式。

文档中的示例：

// return class based on function
var colDef3 = 
    name: 'Function Returns String',
    field' 'field3',
    cellClass: function(params)  return (params.value==='something'?'my-class-1':'my-class-2'); 



// return array of classes based on function
var colDef4 = 
    name: 'Function Returns Array',
    field' 'field4',
    cellClass: function(params)  return ['my-class-1','my-class-2']; 

cellClass 的 params 对象可以访问行数据，并且能够比较新值和原始值。

一旦你开始挖掘，就有很多选择。选择你认为最好的。

【参考方案4】：

看起来您应该可以使用newValueHandler，这是每列的一个属性。

来自文档：

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

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

node：有问题的网格节点。 data：有问题的行数据。 oldValue：如果“字段”在列定义中，则包含编辑前数据中的值。 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

【讨论】：

嗨，请查看我更新的问题。我按照你说的做了，但是没有用。

你试过用 cellValueChanged 代替 newValueHandler 吗？它与我链接到您的同一页面上供您参考。

如何使用这些？您使用 newValueHandler 或 CellValueChanged 提供的链接上没有示例

老实说，我认为您正在寻找一些比您愿意投资的功能更难实现的功能。您正在寻找的似乎是something like what this grid is doing。

是的，我想做这样的事情。那么这不能使用 ag-grid 来完成吗？