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

Question

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

是否可以更改值发生变化的单元格的颜色，例如假设单元格值为 100 并且它变为（小于此值，即 <100) so make the cell red color, id it becomes greater, make it green color. I'm trying to do it using this example: 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

实际上我刚刚开始工作。 您需要在要更改颜色的每一列上使用“cellClassRules”属性。像这样的东西：

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

此处规则中的“x”是列的值。 此外，您需要将列标记为 votaltile: true。
对于动态变化的可变字段，您需要在刷新数据时

api.softRefreshView()

。
可以在您的 html 文件中定义 css 类“bold-and-red”，例如： .bold-and-red { 颜色：暗红色； 字体粗细：粗体； }

Answer 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 为您提供的有关此回调的参数对象的信息非常重要。

您遇到的问题是您正在尝试

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 对象可以访问行数据，并且能够比较新值和原始值。

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

Answer 4

看起来你应该能够使用

newValueHandler

这是每一列的属性。

来自文档：

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

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

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

Answer 5

我们可以在下面写一些逻辑，改变单元格的颜色

const cellRender = params => {
    const filterInput = params.api.getFilterModel().Name?.filter
    const value = params.value

    if (filterInput && value) {
        return <Name name={String(value)} highlight={String(filterInput)} /> // here you can write you logic to change color
    }
    return value
}


export default [
    {
        cellRenderer: cellRender,
        field: 'name',
        headerName: 'Name',
        headerTooltip: 'Name',
        tooltipField: 'name'
    }
]