无法让 React Grid Ag-grid 自动调整屏幕宽度的大小

Question

所以就像标题所说的那样，我在调整网格上的列大小以适应较小的屏幕时遇到了问题。我一直在尝试使用this.gridApi.sizeColumnsToFit()，但它似乎没有做任何事情。我还想将屏幕上的列数减少到四列，如果我不调用 this.gridApi.sizeColumnsToFit((，我就可以做到这一点。当我调用 sizeColumnsToFit 时，它会填充所有列。(还尝试调整大小然后隐藏列(

import React, { Component, Fragment } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-theme-bootstrap.min.css'
import '../Review/ag-grid.css';
import { AuthorizeService } from '../api-authorization/AuthorizeService';
import { AllCommunityModules } from "@ag-grid-community/all-modules";
import "@ag-grid-community/all-modules/dist/styles/ag-grid.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";
import ImageRenderer from '../UI/imageRenderer';
import CharacteristicRenderer from '../UI/characteristicRenderer';
import ShippingRenderer from '../UI/shippingRenderer';
import { fetchAssets } from '../../utils/fetchAsset';
export class Approve extends Component {
constructor() {
super();
this.state = {
ColumnDefs: [
{ headerName: "Inventory Tag Number", field: "inventoryTagNumber", sortable: true, filter: true },
{ headerName: "Locations", field: "location.locationName", sortable: true, filter: true },
{ headerName: "Sequence", field: "transaction.sequence", sortable: true, filter: true },
{ headerName: "Item #", field: "transaction.item", sortable: true, filter: true },
{ headerName: "Quantity", field: "quantity", sortable: true, filter: true },
{ headerName: "Make", field: "make", sortable: true, filter: true },
{ headerName: "Model", field: "model", sortable: true, filter: true },
{ headerName: "Serial #", field: "serialNumber", sortable: true, filter: true },
{ headerName: "Category", field: "category", sortable: true, filter: true },
{ headerName: "SubCategory", field: "subCategory", sortable: true, filter: true },
{ headerName: "Description", field: "description", sortable: true, filter: true },
{ headerName: "Characteristics", field: "characteristics", cellRenderer: "characteristicRenderer" },
{ headerName: "Images", field: "images", cellRenderer: "imageRenderer" },
{ headerName: "Condition", field: "condition", sortable: true, filter: true },
{ headerName: "Shipping Info", field: "shipping", cellRenderer: "shippingRenderer" },
{ headerName: "Notes", field: "notes" },
],
frameworkComponents: {
imageRenderer: ImageRenderer,
characteristicRenderer: CharacteristicRenderer,
shippingRenderer: ShippingRenderer
},
rowDefs: [
// default rows
]
};
this.onGridReady = this.onGridReady.bind(this);

this.onFirstDataRendered = this.onFirstDataRendered.bind(this);
fetchAssets().then(data => {
this.setState({
rowDefs: data
});
}).catch(err => {
console.dir(err);
throw err;
});
}
onGridReady = params => {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
} 
mapImages(imgData) {
console.log(imgData);
return imgData;
}
onFirstDataRendered = params => {
// params.api.sizeColumnsToFit();
};
onGridReady(gridOptions) {
gridOptions.api.addGlobalListener(function(type, event) {
if (type.indexOf('column') >= 0) {
console.log('Got column event: ', event);
}
});
var widthWindow = window.innerWidth;
if (widthWindow < 376) {
console.log("its smaller");
gridOptions.columnApi.setColumnsVisible(['transaction.sequence', 'transaction.item','quantity', 'make', 'serialNumber', 'category', 'subCategory', 'characteristics', 'images', 'condition', 'shipping', 'notes'], false);
this.gridApi.sizeColumnsToFit();
}
}
render() {
return (<Fragment>
<h1>Asset Approve</h1>
<div
className="ag-theme-bootstrap"
style={{
height: '90vh',
width: '90vw',
marginTop: '3em'
}}>
<AgGridReact
pagination={true}
columnDefs={this.state.ColumnDefs}
rowData={this.state.rowDefs}
frameworkComponents={this.state.frameworkComponents}
onGridReady={this.onGridReady}
></AgGridReact>
</div>
</Fragment>);
}
}

那么，我们如何才能调整列的大小以适合，并隐藏其他列呢？

Answer 1

好的，这就是对我有用的

<AgGridReact
rowData={data}
columnDefs={columns}
// this is where the magic happens
onGridColumnsChanged={() => columnApi && columnApi.autoSizeAllColumns()}
onGridReady={params =>setColumnApi(params.columnApi)}
/>

所以基本上如果有任何列更改，我将调整所有列的大小，如果您需要它，还有一个onCellValueChanged事件，您可以传递一个函数来调整它的大小。

我知道现在回复有点晚了，但是嘿!!也许另一个开发人员朋友也可能需要帮助。