REACT / AG-GRID:检索数据后动态设置columnDefs

时间:2019-05-17 17:55:07

标签: reactjs axios ag-grid

componentDidMount()函数中,我正在使用 AXIOS 来检索数据,并且一旦接收到,我就尝试更改列 Header Names < / strong>我的 AG-GRID 后,但标题名称不受影响。

请参见以下代码行 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
            }));
    }

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>

    );
}

我认为上面的代码在做什么(或试图做):

  • 定义了列定义
  • 网格是根据列定义呈现的
  • 数据来源
  • 重新定义列定义
  • 网格已(或应该)重新渲染

但是它没有发生。在我的理想世界中,我想:

  • 检索数据
  • 定义列
  • 渲染网格

但是我被告知“这种方式不起作用”。

1 个答案:

答案 0 :(得分:0)

我的解决方案是对数组进行两个定义,一个设置为STATE对象,另一个设置为独立变量。刷新数据后,将更新独立变量,然后将其用于替换STATE对象。

有更好的方法吗?

Sub NoSpaceversion2b() 
Dim Range, Cell As Range
Dim strSheet As String: strSheet = ActiveSheet.Name

'This stops at cell I47 (value M)
'Set Range = ActiveSheet.UsedRange

'This will get it all the way to cell J46 (value 12/3/1967)
Set Range = ActiveSheet.UsedRange.SpecialCells(xlCellTypeConstants)

For Each Cell In Range
    Cell.Value = Application.WorksheetFunction.Trim(Cell)
    Debug.Print "Cell " & Cell.Address & " ; " & Cell.Value; " trimmed"
Next Cell

MsgBox "All Leading/Trailing spaces removed on worksheet '" & strSheet & "'.", vbOKOnly, "Operation Complete"

End Sub