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

我有一个从动态更改的数据加载的表格。它每5秒刷新一次。我使用本实施例中使用AG-网格为它：https://www.ag-grid.com/javascript-grid-sorting/index.php 如何更改动态更改数据的ag-grid单元格的颜色

是否有可能改变其值有变化，比如假设一个小区值为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'}; 
    } 
}

来源

2016-09-22 shek

如果您看到，ag-grid文档有一个用于刷新（https://www.ag-grid.com/javascript-grid-refresh/）功能的页面。第二个例子是你可以看看的东西。如果值大于20，则“总计”列中值的颜色会发生更改，具体取决于行中其他列的总和。我无法解决的问题是这些类是如何动态应用的。 – jsmtslch

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

从文档：

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

newValueHandler提供一种params对象具有属性：

节点：有问题的网格节点。

data：有问题的行数据。

oldValue：如果'field'在列定义中，则包含编辑前数据中的值。

newValue：输入到默认编辑器中的字符串值。

rowIndex：虚拟行的索引。

colDef：列定义。

上下文：在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} 
}

来源

2016-09-22 21:31:29

嗨，请看我更新的问题。我照你说的做了，但没有奏效。 – shek

这有什么更新？ – shek

有任何更新请？ – shek

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

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

而且信息贾罗德莫泽就给大家介绍params对象用于本回调是重要的。

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

编辑 - 其他信息

我不认为你正在尝试做我会用newValueHandler的。

你不会说你如何更新数据，但你确实说它可能每5秒更新一次。

但是您正在决定更新单元格，您可以向rowData对象添加属性'origValue'，并且在更新单元格值之前，将当前值设置为'origValue'，然后将新值设置为值。那么...您可以使用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对象访问行数据，并能够比较新的和原稿值。

挖掘后有很多选择。选择你认为最好的。

来源

2016-10-18 23:46:36 JohnR

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

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

规则中的'x'是该列的值。另外，您需要将您的列标记为voaltile：true。
要使易失性字段动态更改，在刷新数据时需要api.softRefreshView()。
可以在您的html文件中定义css类'bold-and-red'，如： .bold-and-red颜色：darkred; font-weight：bold; }

来源

2016-11-04 19:35:24 jsmtslch

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

回答

相关问题