如何为动态变化的数据更改ag网格单元格的颜色

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

本文关键字：ag 网格 颜色 单元格 数据 动态 变化      更新时间：2023-09-26

我有一个从动态变化的数据加载的表。每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'};
    }
}

这段代码可以改变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;
                }
            }
        }

其实我刚修好我的。您需要在每个想要更改颜色的列上设置"cellClassRules"属性。比如:

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

这里规则中的'x'是列的值。此外，您需要将您的列标记为volatile: true。
要动态更改volatile字段，在刷新数据时需要api.softRefreshView()。
css类'bold-and-red'可以在你的html文件中定义如下:.bold-and-red {颜色:darkred;粗细:大胆的;}

你写的大部分是正确的:

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>，我会用我发现的编辑这篇文章。

EDIT -附加信息

我不认为我会使用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对象可以访问行数据，并且可以比较新值和原始值。

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

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

From the docs:

如果您想使用简单的文本编辑，但是希望在插入行之前以某种方式格式化结果，那么您可以向列提供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}
}

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

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'
    }
]
相关文章：