javascript 如何为动态变化的数据改变ag-grid单元格的颜色

lnvxswe2  于 2023-03-28  发布在  Java
关注(0)|答案(5)|浏览(349)

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

nsc4cvqm1#

下面是一段代码,您可以在其中更改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;
                }
            }
        }
xoefb8l8

xoefb8l82#

实际上,我刚刚让我的工作。你需要“cellClassRules”属性的每一列,你想改变颜色。类似于:

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

这里规则中的'x'是列的值。此外,您需要将您的列标记为voaltile:没错。
对于动态更改的volatile字段,在刷新数据时需要api.softRefreshView()
css类'bold-and-red'可以在html文件中定义如下:.bold-and-red { color:darkred; font-weight:粗体; }

z31licg0

z31licg03#

你写的大部分是正确的:

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。THEN...你可以使用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对象可以访问行数据,并且能够比较新值和原始值。
一旦你开始挖掘,有很多选择。选择你认为最好的。

woobm2wo

woobm2wo4#

看起来你应该能够使用newValueHandler,这是每一列的属性。
来自文档:
如果你想使用简单的文本编辑,但想在插入到行之前以某种方式格式化结果,那么你可以为列提供一个newValueHandler。这将允许你为值添加额外的验证或对话。
newValueHandler提供了一个具有以下属性的params对象:

  • node:相关的网格节点。
  • 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}
}
kb5ga3dv

kb5ga3dv5#

我们可以在下面写一些逻辑的东西,然后改变单元格的颜色

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

相关问题