显示网格后如何更改列标题？

Question

我正在使用 ag-grid-react 组件，我希望能够更改我的网格中的列标题以响应我的 React 组件中的事件。我可以看到列 API 有一个 getDisplayNameForColumn() 函数，但我找不到等效的设置函数来允许我更改列标题。

我将网格列定义数组存储在我的 React 组件的状态中，我认为只需更新状态下的定义数组，组件就会被 React 框架自动刷新，并且我的新列标题会被展示；然而，这并没有发生，原来的标题仍然存在。

是否可以在网格初始化并显示后更改列标题？我在下面复制了我的 React 组件的代码。

import React, { Component } from 'react'
import { Page, Header, Title, Button, Content } from '@cdkglobal/react-jqm'
import StatusBar from '@cdkglobal/react-jqm-statusbar'
import StandardColsList from './StandardColsList'
import { AgGridReact } from 'ag-grid-react'
import { APP_TITLE } from '../constants'
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/theme-fresh.css';

export default class DatasetPage extends Component {
static propTypes = {
    onClickBack: React.PropTypes.func,
    onClickSave: React.PropTypes.func,
    dataset: React.PropTypes.array.isRequired,
    uploaditem: React.PropTypes.object.isRequired,
    stdcolumns: React.PropTypes.array
}

static defaultProps = {
    dataset: []
}

state = {
    gridApi: {},
    columnApi: {},
    columnDefs: [],
    displaystdcols: false,
    selectedcol: -1

}

componentDidMount() {
    if (this.props.onInit) {
        this.props.onInit()
    }

    this.setState({ columnDefs: this.buildColumns(this.props.dataset[0]) })

}

buildColumns(sampleRow) {
    // Build a columns definition array for the React data grid component
    let columns = []
    let colIndex = 0

    for (let column in sampleRow) {

        let columnDef = {
            colId: colIndex,
            field: column,
            headerName: column,
            minWidth: '80px',
            stdcolIndex: -1
        }

        colIndex++
        columns.push(columnDef)
    }

    return columns

}

onGridReady(params) {
    this.setState({ gridApi: params.api })
    this.setState({ columnApi: params.columnApi })
}

render() {

    const columnDefs = this.state.columnDefs
    const agDivStyle = {
        height: '500px'
    }

    const onCellClicked = (event) => {
        // Set the selected column index
        this.setState({ selectedcol: event.colDef.colId })

        // Display the standard columns popup
        this.setState({ displaystdcols: true })
    }

    const onSaveColMapping = (selectedStdCol) => {
        // Save the column mapping
        const columnApi = this.state.columnApi
        const column = columnApi.getColumn(this.state.selectedcol)

        if (selectedStdCol > -1) {

            // Update the column definition for the selected column
            let columnDefs = this.state.columnDefs
            columnDefs[this.state.selectedcol].stdcolIndex = selectedStdCol
            columnDefs[this.state.selectedcol].headerName = this.props.stdcolumns[selectedStdCol].description
            this.setState({ columnDefs: columnDefs })

            column.colDef.headerName = this.props.stdcolumns[selectedStdCol].description
            column.colDef.stdcolIndex = selectedStdCol
            console.log(column)
            console.log(columnApi.getDisplayNameForColumn(column))

            // Now refresh the grid
            // columnApi.setColumnState(columnDefs)
            this.state.gridApi.refreshView()

        }

        // Hide the standard columns popup
        this.setState({ displaystdcols: false })
    }

    const onClosePopup = () => {
        this.setState({ displaystdcols: false })
    }

    let stdcolspopup
    if (this.state.displaystdcols) {
        stdcolspopup = (
            <StandardColsList standardcols={this.props.stdcolumns} selectedcoldef={this.state.columnDefs[this.state.selectedcol]} onClickOK={onSaveColMapping} onClickCancel={onClosePopup} />
        )

    }


    return (
        <Page>
            <Header>
                <Button icon="carat-l" corners shadow pos="left" alt={false} onClick={this.props.onClickBack}>Back</Button>
                <Title>{APP_TITLE}</Title>
                <Button primary corners shadow pos="right" icon="plus" alt={false} onClick={this.props.onClickSave}>Save</Button>
                <StatusBar name={this.props.uploaditem.uploadfile} />
            </Header>

            <Content className="has-status-bar">
                <div className="ag-fresh" style={agDivStyle}>
                    <AgGridReact

                        // listen for events with React callbacks
                        // onRowSelected={this.onRowSelected.bind(this)}
                        onCellClicked={onCellClicked}
                        onGridReady={this.onGridReady.bind(this)}

                        // binding to properties within React State or Props
                        // showToolPanel={this.state.showToolPanel}
                        // quickFilterText={this.state.quickFilterText}
                        // icons={this.state.icons}

                        // column definitions and row data are immutable, the grid
                        // will update when these lists change
                        columnDefs={columnDefs}
                        rowData={this.props.dataset}

                        // or provide props the old way with no binding
                        enableColResize="true"
                        rowSelection="multiple"
                        suppressRowClickSelection="true"
                        enableSorting="true"
                        enableFilter="false"
                        rowHeight="22"
                        />

                    {stdcolspopup}
                </div>

            </Content>
        </Page>
    )

}

}

Answer 1

没有具体的反应，但这是你用普通的旧 JavaScript:

的方式

var makeCol = gridOptions.columnApi.getColumn("make")
makeCol.colDef.headerName="New Header Name";
gridOptions.api.refreshHeader();

当您希望 header 更新

时，这显然可以包含在要调用的函数中

显示网格后如何更改列标题？

How do I change column headings after the grid has been displayed?

ag-grid

ag-grid-react