AG Grid SetColumnSize - PullRequest
Новая
       131

AG Grid SetColumnSize

0 голосов
/ 23 сентября 2019

Я пишу реагирующий компонент, используя AG Grid, и хочу сохранить ширину столбца в localstorage, чтобы при обновлении страницы она сохранялась, и я мог получить ее и соответственно установить ширину столбцов.До сих пор я успешно сохранил ширину столбца в локальном хранилище, но у меня возникли проблемы с итерацией по столбцам и сбросом ширины. Любая помощь будет принята с благодарностью! 

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;

1 Ответ

0 голосов
/ 23 сентября 2019

Вы можете использовать методы getColumnState и setColumnState

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

getColumnState возвращает объект с текущимсостояние всех столбцов сетки.Вы можете сохранить их в localStorage, получить их обратно и установить

...