是否可以以编程方式设置单元格中文本的颜色?好吧,我的情况是我在数据网格中填写了一些数字。我想根据他们的价值观给他们上色。我有点迷路了,因为我没有找到自定义单个单元格的方法。我已经尝试过“rowRender”,但它并没有完成我的任务,因为它只为一行着色。我想要的是为单个单元格着色。是否有可能做到这一点。
问问题
1317 次
1 回答
3
是的,我们可以根据数据格式化列。请参阅以下示例以了解如何实现它,
import ReactDOM from "react-dom";
import React from "react";
import ReactDataGrid from "react-data-grid";
import "./styles.css";
class NameFormatter extends React.Component {
render() {
return (
<span className={this.props.dependentValues.id === 1 ? "red" : "green"}>
{this.props.value}
</span>
);
}
}
let columns = [
{
key: "id",
name: "Id",
getRowMetaData: row => row
},
{
key: "name",
name: "Name",
getRowMetaData: row => row,
formatter: NameFormatter
}
];
class App extends React.Component {
constructor() {
super();
this.state = {
data: [{ id: 1, name: "einsten" }, { id: 2, name: "newton" }]
};
this.rowGetter = this.rowGetter.bind(this);
this.getSize = this.getSize.bind(this);
}
rowGetter(rowIndex) {
let rows = this.getRows();
return rows[rowIndex];
}
getRows() {
return this.state.data;
}
getSize() {
return this.getRows().length;
}
render() {
return (
<ReactDataGrid
columns={columns}
rowsCount={this.getSize()}
rowGetter={this.rowGetter}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
为了自定义列,我们需要编写一个格式化程序组件,这里Nameformatter
是name
列的格式化程序组件。我们可以通过格式化程序组件访问列值this.props.value
和元数据(其他列值)this.props.dependentValues.nameoffield
。
请参阅工作示例
于 2018-09-14T14:30:37.113 回答