AG网格SetColumnSize

Question

我正在使用AG Grid编写一个react组件，并希望将列宽存储到本地存储中，这样当页面刷新时，它将被保存，我可以检索它并相应地设置列宽。到目前为止，我已经成功地将列宽保存到本地存储中，但是在迭代列和重置宽度时遇到了麻烦。任何帮助都将不胜感激！

import React, { Component } from 'react';
import './App.css';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      columnDefs: [{
        headerName: "Make", field: "make"
      }, {
        headerName: "Model", field: "model"
      }, {
        headerName: "Price", field: "price"
      }],
      rowData: [{
        make: "Toyota", model: "Celica", price: 35000
      }, {
        make: "Ford", model: "Mondeo", price: 32000
      }, {
        make: "Porsche", model: "Boxter", price: 72000
      }],
      defaultColDef: { resizable: true },
    };

  }

  onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.restoreState(params);
    };

  onColumnEvent = (params) => {
    if (params.finished === true) {
      let columnId = params.column.colId;
      let columnWidth = params.columnApi.columnController.bodyWidth;
      this.saveState(columnId, columnWidth);
    }
  };

  saveState = (key, value) => {
    window.localStorage.setItem(key, value);
  };

  restoreState = (params) => {
    for (let col of this.state.columnDefs) {
      //console.log(col);
      //console.log(params.columnApi);
      params.columnApi.setColumnWidth(col.headerName, window.localStorage.getItem(col.field));
      console.log(window.localStorage.getItem(col.field));
      //console.log(params.columnApi.columnController.bodyWidth)
    }

    console.log('State restored');
  };

  render() {
    return (
        <div
            className="ag-theme-balham"
            style={{
              height: '500px',
              width: '600px' }}
        >
          <AgGridReact
              columnDefs={this.state.columnDefs}
              defaultColDef={this.state.defaultColDef}
              rowData={this.state.rowData}
              onColumnResized={this.onColumnEvent}
              onGridReady={this.onGridReady}>

          </AgGridReact>
        </div>
    );
  }
}

export default App;

Answer 1

您可以使用getColumnState和setColumnState方法

https://www.ag-grid.com/javascript-grid-column-api/

getColumnState返回一个对象，其中包含网格所有列的当前状态。您可以将它们存储在localStorage中，然后检索它们并设置