Javascript Can'；让React Grid Ag Grid自动调整屏幕宽度的大小

所以正如标题所说，我很难调整网格上的列的大小，以适应更小的屏幕。我一直在尝试使用

this.gridApi.sizeColumnsToFit（）

，但它似乎什么都没做。我还想将屏幕上的列数减少到四列，如果不调用this.gridApi.sizeColumnsToFit（），我就可以做到这一点。当我调用sizeColumnsToFit时，它会填充所有列。（还尝试调整大小，然后隐藏列）

import React，{Component，Fragment}来自'React'；
从'ag grid react'导入{AgGridReact}；
导入'ag grid community/dist/styles/ag theme bootstrap.min.css'
导入“../Review/ag grid.css”；
从“../api authorization/AuthorizeService”导入{AuthorizeService}；
从“@ag-grid-community/all-modules”导入{AllCommunityModules}”；
导入“@ag-grid-community/all-modules/dist/styles/ag-grid.css”；
导入“@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css”；
从“../UI/ImageRenderer”导入ImageRenderer；
从“../UI/CharacteristicRenderer”导入CharacteristicRenderer；
从“../UI/ShippingRenderer”导入ShippingRenderer；
从“../../utils/fetchAsset”导入{fetchAssets}；
导出类扩展组件{
构造函数（）{
超级（）；
此.state={
ColumnDefs：[
{headerName:“库存标签号”，字段：“库存标签号”，可排序：true，筛选器：true}，
{headerName:“Locations”，字段：“location.locationName”，可排序：true，筛选器：true}，
{headerName:“Sequence”，字段：“transaction.Sequence”，可排序：true，筛选器：true}，
{headerName:“Item#”，字段：“transaction.Item”，可排序：true，筛选器：true}，
{headerName:“数量”，字段：“数量”，可排序：true，筛选器：true}，
{headerName:“Make”，字段：“Make”，可排序：true，筛选器：true}，
{headerName:“Model”，字段：“Model”，可排序：true，筛选器：true}，
{headerName:“Serial#”，字段：“serialNumber”，可排序：true，筛选器：true}，
{headerName:“Category”，字段：“Category”，可排序：true，筛选器：true}，
{headerName:“子类别”，字段：“子类别”，可排序：true，筛选器：true}，
{headerName:“Description”，字段：“Description”，可排序：true，筛选器：true}，
{标题名称：“特征”，字段：“特征”，单元格渲染器：“特征渲染器”}，
{标题名称：“图像”，字段：“图像”，单元格渲染器：“图像渲染器”}，
{headerName:“条件”，字段：“条件”，可排序：true，筛选器：true}，
{headerName:“Shipping Info”，字段：“Shipping”，cellRenderer:“shippingRenderer”}，
{标题名称：“注释”，字段：“注释”}，
],
框架组件：{
imageRenderer:imageRenderer，
characteristicRenderer:characteristicRenderer，
shippingRenderer:shippingRenderer
},
rowDefs：[
//默认行
]
};
this.onGridReady=this.onGridReady.bind（this）；
this.onFirstDataRendered=this.onFirstDataRendered.bind（this）；
fetchAssets（）。然后（数据=>{
这是我的国家({
rowDefs：数据
});
}).catch（错误=>{
console.dir（err）；
犯错误；
});
}
onGridReady=params=>{
this.gridApi=params.api；
this.gridColumnApi=params.columnApi；
} 
地图图像（imgData）{
控制台日志（imgData）；
返回imgData；
}
onFirstDataRendered=params=>{
//params.api.sizeColumnsToFit（）；
};
onGridReady（网格选项）{
addGlobalListener（函数（类型，事件）{
if（type.indexOf（'column'）>=0）{
log（'Got column event:'，event）；
}
});
var widthWindow=window.innerWidth；
如果（窗口宽度<376）{
console.log（“其较小者”）；
gridOptions.columnApi.setColumnsVisible（['transaction.sequence'、'transaction.item'、'quantity'、'make'、'serialNumber'、'category'、'subCategory'、'characteristics'、'images'、'condition'、'shipping'、'notes']，false）；
this.gridApi.sizeColumnsToFit（）；
}
}
render（）{
返回(
资产批准
);
}
}

---

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

好的，这对我来说很有用

columnApi&&columnApi.autosizealcolumns（）}
onGridReady={params=>setColumnApi（params.columnApi）}
/>

因此，基本上我会调整所有列的大小，如果任何列发生更改，如果需要，还可以通过一个

onCellValueChanged

事件传递一个函数，在该函数中可以调整其大小

---

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

嘿，你解决了这个问题吗？我有一个类似的问题，我认为问题是调整大小是在更新表之前发生的，因此导致了不希望的结果。我尝试使用timeOut setTimeOut（this.gridApi.sizeColumnsToFit，250），但如果再次呈现表需要很长时间，则此操作可能会失败。。。我仍然在寻找一种更好的方法，在列发生更改后调整其大小。

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>);
    }
}