我正在使用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>
)
}
}
答案 0 :(得分:3)
没有特定的反应,但这是你用普通的旧JavaScript来做的事情:
var makeCol = gridOptions.columnApi.getColumn("make")
makeCol.colDef.headerName="New Header Name";
gridOptions.api.refreshHeader();
当你想要更新标题时,这显然可以包含在要调用的函数中