Question

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

是否可以更改值有变化的单元格的颜色，例如假设单元格值为100并且变为（小于此值<100），因此使单元格变为红色，id变得更大，使其成为绿色。我正在尝试使用此示例：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

你所写的内容大多是正确的：

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

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

Answer 2

其实我刚开始工作了。你需要＆＃34; cellClassRules＆＃34;要在其中更改颜色的每列的属性。类似的东西：

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

这里＆＃39; x＆＃39;在规则中是列的值。此外，您需要将列标记为voaltile：true 要使volatile字段动态更改，在刷新数据时需要api.softRefreshView() css类＆＃39;粗体和红色＆＃39;可以在你的html文件中定义，如： .bold-and-red { 颜色：深色; font-weight：bold; }

Answer 3

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

来自文档：

如果要使用简单文本编辑，但希望在插入行之前以某种方式格式化结果，则可以向列提供newValueHandler。这将允许您向值添加其他验证或对话。

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


node：有问题的网格节点。

数据：有问题的行数据。

oldValue：如果＆＃39; field＆＃39;在列定义中，包含编辑前数据中的值。

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 4

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

Searching for binaries...

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

4 个答案: