[英]REACT / AG-GRID: Dynamically setting columnDefs after retrieving data
Within the componentDidMount() function, I'm using AXIOS to retrieve data and once received, I'm trying to change the column Header Names of my AG-GRID after retrieving data, but the Header Names are unaffected.在componentDidMount()函数中,我使用AXIOS检索数据,一旦收到,我试图在检索数据后更改我的AG-GRID的列标题名称,但标题名称不受影响。
Please see line this.gridOptions.api.setColumnDefs(columnDefs) in the following code.请参阅以下代码中的this.gridOptions.api.setColumnDefs(columnDefs)行。
var columnDefs = [
{ headerName: "column0", field: "column0", width: 300 },
{ headerName: "column1", field: "column1", width: 100 },
{ headerName: "column2", field: "column2", width: 100 },
{ headerName: "column3", field: "column3", width: 100 },
{ headerName: "column4", field: "column4", width: 100 },
{ headerName: "column5", field: "column5", width: 100 },
];
var PARMS = '';
class Home extends React.Component {
state = {
columnDefs: columnDefs,
header: {},
isLoading: false,
error: null
}
componentDidMount() {
this.setState({ isLoading: true });
axios.get(API + PARMS)
.then(fubar => {
const rowData = fubar.data.results;
this.setState({ rowData });
const headerRow = fubar.data.header;
columnDefs[0].headerName = headerRow.column0;
columnDefs[1].headerName = headerRow.column1;
columnDefs[2].headerName = headerRow.column2;
columnDefs[3].headerName = headerRow.column3;
columnDefs[4].headerName = headerRow.column4;
columnDefs[5].headerName = headerRow.column5;
this.gridOptions.api.setColumnDefs(columnDefs);
})
.catch(error => this.setState({
error,
isLoading: false
}));
}
The RENDER() is: RENDER() 是:
render() {
const { isLoading, rowData, columnDefs } = this.state;
return (
<div className="ag-theme-balham" style={{ height: '525px', width: '920px' }} >
<h2>{heading}</h2>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}>
</AgGridReact>
</div>
);
}
I think what the code above is doing (or trying to do):我认为上面的代码正在做什么(或试图做什么):
But it isn't happening.但它没有发生。 In my perfect world, I'd instead like to:在我的完美世界中,我宁愿:
But I'm told "it doesn't work that way".但有人告诉我“它不是那样工作的”。
My solution is two define to Arrays with one set up as a STATE object and the other as a stand alone variable.我的解决方案是对数组进行两个定义,一个设置为状态对象,另一个设置为独立变量。 When the data is refreshed, the stand alone variable is update, and is then used to replace the STATE object.当数据刷新时,独立变量更新,然后用于替换状态对象。
Is there a better way?有没有更好的办法?
var columnDefsNew = [
{ headerName: "", field: "column0", width: 300, },
{ headerName: "", field: "column1", width: 100 },
{ headerName: "", field: "column2", width: 100 },
{ headerName: "", field: "column3", width: 100 },
{ headerName: "", field: "column4", width: 100 },
{ headerName: "", field: "column5", width: 100, }];
class Home extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{ headerName: "", field: "column0", width: 300 },
{ headerName: "", field: "column1", width: 100 },
{ headerName: "", field: "column2", width: 100 },
{ headerName: "", field: "column3", width: 100 },
{ headerName: "", field: "column4", width: 100 },
{ headerName: "", field: "column5", width: 100 }],
rowData: null,
isLoading: false,
error: null
};
}
componentDidMount() {
this.setState({ isLoading: true });
axios.get(API + PARMS)
.then(fubar => {
const headerRow = fubar.data.header;
const rowData = fubar.data.results;
this.setState({ rowData });
columnDefsNew[0].headerName = headerRow.column0;
columnDefsNew[1].headerName = headerRow.column1;
columnDefsNew[2].headerName = headerRow.column2;
columnDefsNew[3].headerName = headerRow.column3;
columnDefsNew[4].headerName = headerRow.column4;
columnDefsNew[5].headerName = headerRow.column5;
this.setState({ columnDefs: columnDefsNew });
})
.catch(error => this.setState({
error,
isLoading: false
}));
}
render() {
const { isLoading, rowData, columnDefs } = this.state;
return (
<div className="ag-theme-balham" style={{ height: '525px', width: '900px' }} >
<h2>{heading}</h2>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}>
</AgGridReact>
</div>
);
}
}
export default Home;
We can able to set dynamic column after retrieve api data by using below function我们可以使用以下函数在检索 api 数据后设置动态列
Here I have used getColumnDefs() and setColumnDefs() from gridApi在这里,我使用了 gridApi 的getColumnDefs() 和 setColumnDefs()
const dynamicallyConfigureColumnsFromObject = (anObject, ticketGridRef) => {
const colDefs = ticketGridRef.current.api.getColumnDefs()
const keys = Object.keys(anObject)
keys.forEach(key => {
if (colDefs.some(l => l.field === key) === false) {
colDefs.push({ field: key, filter: 'agTextColumnFilter', headerName: key})
}
})
ticketGridRef.current.api.setColumnDefs(colDefs)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.