Question

我正在像这样使用ag-grid-react：

import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

并在render中这样声明（为了清楚起见，删除了一些细节）：

return <div className="MarketGrid ag-theme-balham" >
    <AgGridReact domLayout='autoHeight'
        enableCellChangeFlash={true}
        rowSelection={'single'}
        onSelectionChanged={this.onSelectionChanged.bind(this)}
        onGridReady={this.onGridReady.bind(this)} />
    </div>;

“ enableCellChangeFlash”属性可以正常工作，我知道如何更改其颜色，但是如果我想根据新值是高于还是低于新值来更改颜色，该怎么办？

我的更新代码如下：

let row = this.gridApi.getRowNode(this.props.productIds.indexOf(id));
    for (var f in data) {
        row.setDataValue(f, data[f]);
    }
}

我想我应该在某个地方设置单元格样式，但是我不确定在哪里。

更新：根据此页面https://www.ag-grid.com/javascript-grid-data-update/#flashing，我应该这样做：

“如果要覆盖闪光灯的显示方式（例如，更改背景颜色或删除动画），则覆盖相关的CSS类。”

有人知道该怎么做吗？

Answer 1

单击顶部下拉菜单中的“ Flashing Cell”选项，然后可以为上下更改选择其他颜色。您还可以设置闪烁的时间。

Answer 2

我现在差不多了。我发现的答案是基于CSS的。设置闪烁/停止闪烁的类名，例如：

return (<div key={Math.random()}
  className={some logic to set classname here, like "blink-red" or "blink-blue"}
  onAnimationEnd={() => this.setState({ fade: false })}
  > {this.state.value} </div>);

并使用onAnimationEnd设置一些会影响该逻辑的状态变量。

然后将这样的衰落逻辑添加到CSS：

.blink-red {
  animation: redtotransparent 3s ease 5s;
}

@keyframes redtotransparent {
  from {
    background-color: red;
    color: white;
  }
  to {
    background-color: transparent;
    color: black;
  }
}

它仍然不完美，但几乎可以满足要求。更改密钥使React认为DOM已更改。当我提出更好的建议时，我将在此处添加。

AgGrid：如何根据更改以不同的颜色闪烁单元格

2 个答案: