javascript - AG Grid SetColumnSize
问题描述
我正在使用 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;
解决方案
您可以使用 getColumnState 和 setColumnState 方法
https://www.ag-grid.com/javascript-grid-column-api/
getColumnState 返回一个具有网格所有列的当前状态的对象。您可以将它们存储在 localStorage 并检索它们并设置
推荐阅读
- javascript - 无法在 reactjs 中使用地图显示列表项?
- ios - “(类)->()->(类)”类型的值没有成员“变量”
- flask - 发送 lat/lng 以查看
- xml - XSLT 1.0 - 外部文件查找表
- r - 使用 ggplot2 绘制 sf 多边形,并使用变量着色
- tensorflow - 非单热编码标签的分类交叉熵的对应物
- python - jenkins python api安装插件
- vue.js - vuejs 自动过滤掉标记为“Bar”的数组
- mysql - Thread-103 超时:池为空。无法在 30 秒内获取连接,无可用
- javascript - Json 到 Node Js 中的 csv