我有一个从动态变化的数据中加载的表。它每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'};
}
}
5条答案
按热度按时间nsc4cvqm1#
下面是一段代码,您可以在其中更改ag网格单元格文本的颜色和背景颜色。
xoefb8l82#
实际上,我刚刚让我的工作。你需要“cellClassRules”属性的每一列,你想改变颜色。类似于:
这里规则中的'x'是列的值。此外,您需要将您的列标记为voaltile:没错。
对于动态更改的volatile字段,在刷新数据时需要
api.softRefreshView()
。css类'bold-and-red'可以在html文件中定义如下:.bold-and-red { color:darkred; font-weight:粗体; }
z31licg03#
你写的大部分是正确的:
Jarod Moser给你的关于这个回调的params对象的信息是非常重要的。
您遇到的问题是您试图
return {style}
,但您无法做到这一点。您需要访问html元素(包含<div>
)并在其上设置一个类(用你想要的样式定义类)我已经在ag-grid中做了这个,我可以访问params.eGridCell
,但是在这个特定的回调函数中eGridCell不可用。如果我找到了一个好的方法来获得<div>
,我会用我找到的东西编辑这篇文章。编辑-其他信息
我不认为我会使用newValueHandler来完成你想做的事情。
你没有说你是如何更新数据的,但你说它可能每5秒更新一次。
无论你决定更新一个单元格,你都可以在rowData对象中添加一个属性'origValue',在更新单元格值之前,将当前值设置为'origValue',然后将新值设置为value。THEN...你可以使用
cellClass
列属性,使用回调函数,将新值与'origValue'进行比较,并返回所需的样式。文档中的示例:
cellClass的params对象可以访问行数据,并且能够比较新值和原始值。
一旦你开始挖掘,有很多选择。选择你认为最好的。
woobm2wo4#
看起来你应该能够使用
newValueHandler
,这是每一列的属性。来自文档:
如果你想使用简单的文本编辑,但想在插入到行之前以某种方式格式化结果,那么你可以为列提供一个newValueHandler。这将允许你为值添加额外的验证或对话。
newValueHandler提供了一个具有以下属性的params对象:
所以大致沿着这样的:
kb5ga3dv5#
我们可以在下面写一些逻辑的东西,然后改变单元格的颜色