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

How to change color of ag-grid cells for dynamically changing data

提问by shek

I have a table that loads from dynamically changing data. It refreshes every 5 secs. I'm using ag-grid for it using this example: https://www.ag-grid.com/javascript-grid-sorting/index.php

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

Is it possible to change color of the cells whose values have changes, like suppose a cell value is 100 and it becomes (less than this i.e. <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

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

But I can't understand how to do this.

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

UPDATE: I'm doing it this way, but it's not changing the color:

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

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

回答by JohnR

What you have written is mostly correct:

你写的大部分是正确的：

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

And the info Jarod Moser gave you about the params object for this callback is spot on and important.

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

The issue you are having is that you are trying to return {style}but you can't do that. You need to have access to the html element (the containing <div>) and set a class on it (having the class defined with the style you desire). I have done this in ag-grid where I have access to params.eGridCellbut within this particular callback eGridCell is not available. If I find a good way to get to the <div>I'll edit this post with what I found.

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

EDIT - Additional Information

编辑 - 附加信息

I don't think I would use the newValueHandler for what you are trying to do.

我认为我不会将 newValueHandler 用于您要执行的操作。

You don't say how you are updating the data, but you do say it is possibly updated every 5 seconds.

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

However you are deciding to update a cell, you could add to the rowData object a property 'origValue', and before updating the cell value, set the current value to 'origValue' and then set the new value to value. THEN... you could use the cellClasscolumn property, using a callback function, and compare the new value to the 'origValue' and return the desired style.

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

Examples from the Documentation:

文档中的示例：

// 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']; }
}

The params object for cellClass has access to the row data, and will be able to compare the new and orig values.

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

There are many options once you get digging. Choose what you think is best.

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

回答by jsmtslch

Actually I just got mine working. You need "cellClassRules" attribute on each column where you want to change the color. Something like:

其实我只是让我的工作。您需要在要更改颜色的每一列上使用“cellClassRules”属性。就像是：

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

Here 'x' in the rule is the value of the column. Also, you need to mark your column as voaltile: true.
For volatile fields to dynamically change, you need api.softRefreshView()while you are refreshing the data.
The css class 'bold-and-red'can be defined in your html file like: .bold-and-red { color: darkred; font-weight: bold; }

这里规则中的“x”是列的值。此外，您需要将您的列标记为 voaltile: true。
对于要动态更改的可变字段，您需要api.softRefreshView()在刷新数据时。
css 类 'bold-and-red' 可以在你的 html 文件中定义，如： .bold-and-red { color: darkred; 字体粗细：粗体；}

回答by Rajanikanta Pradhan

Here is the snippet of code where you can change the color of the ag grid cell text and background color.

这是代码片段，您可以在其中更改 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;
                }
            }
        }

回答by Jarod Moser

Looks like you should be able to use the newValueHandlerwhich is an attribute of each column.

看起来你应该能够使用newValueHandlerwhich 是每列的一个属性。

From the docs:

从文档：

If you want to use the simple text editing, but want to format the result in some way before inserting into the row, then you can provide a newValueHandler to the column. This will allow you to add additional validation or conversation to the value.

newValueHandler is provided a params object with attributes:

• node: The grid node in question.
• data: The row data in question.
• oldValue: If 'field' is in the column definition, contains the value in the data before the edit.
• newValue: The string value entered into the default editor.
• rowIndex: The index of the virtualised row.
• colDef: The column definition.
• context: The context as set in the gridOptions. api: A reference to the ag-Grid API.

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

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

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

So something along the lines of:

所以类似的东西：

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