动态添加 colDefs

Question

我正在尝试在单击按钮时以编程方式添加列定义，而不是在我的 ReactJS 页面中对其进行硬编码。

{
    headerName: "Product1",
    resizable: true,
    wrapText: true,
    cellStyle: {
        'white-space': 'normal'
    },
    autoHeight: true,
    hide: true,
    cellRendererFramework.MyCustomColumnRenderer
}

不确定如何实施？ 感谢您的帮助。

Answer 1

您可以在网格中定义 columnDefs 以使用状态，然后动态设置状态。

import React from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const App = () => {
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];

  // use the colDefs state to define the column definitions
  const [colDefs, setColDefs] = React.useState([{ field: 'make' }]);

  // when the button is pressed set the state to cause the grid to update
  const handleAddColumns = ()=> {
    const dynamicFields = [
      { field: 'make', header: 'Car Make' },
      { field: 'model', sortable: true },
      { field: 'price' },
    ];
    setColDefs(dynamicFields);
  }

  return (
    <div>
      <button onClick={handleAddColumns}>Add Column Defs</button>
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact 
            rowData={rowData}
            columnDefs={colDefs}>
        </AgGridReact>
      </div>
    </div>
  );
};

render(<App />, document.getElementById('root'));

另一种方法是使用Api的setColumnDef方法：

import React from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const App = () => {
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ];

  // using state to define the columns initially
  const [colDefs, setColDefs] = React.useState([{ field: 'make' }]);
  // get a reference to the API when the onGridReady is fired
  // see the Grid definition in the JSX
  const [gridApi, setGridApi] = React.useState([]);

const handleAddColumns = ()=> {
    const dynamicFields = [
      { field: 'make', header: 'Car Make' },
      { field: 'model', sortable: true },
      { field: 'price' },
    ];
    // use the API to set the Column Defs
    gridApi.setColumnDefs(dynamicFields);
  }

  return (
    <div>
      <button onClick={handleAddColumns}>Add Column Defs</button>
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact 
            rowData={rowData}
            columnDefs={colDefs}
            onGridReady={ params => {setGridApi(params.api)} }
            ></AgGridReact>
      </div>
    </div>
  );
};

render(<App />, document.getElementById('root'));

文档中的示例应该会有所帮助：

• https://www.ag-grid.com/react-data-grid/column-definitions/
• https://www.ag-grid.com/react-data-grid/column-updating-definitions/

还有一篇来自 AG Grid 的博客文章涵盖了动态列定义：

• https://blog.ag-grid.com/binding-and-updating-column-definitions-in-ag-grid/

Answer 2

使用setColumnDefs(columnDefs)

    const columnDefs = getColumnDefs();
    columnDefs.forEach(function (colDef, index) {
      colDef.headerName = 'Abcd';
    });
    this.gridApi.setColumnDefs(columnDefs);

https://plnkr.co/edit/0ctig4P2yzPjhycB