调整单个页面中多个 ag-grid 实例的所有列的大小

Posted 2023-03-28

【中文标题】调整单个页面中多个 ag-grid 实例的所有列的大小

【英文标题】：Resize all the columns of multiple instances of ag-grid in a single page

【发布时间】：2020-10-09 12:26:23

【问题描述】：

我在一个页面中有多个 Ag-grid 表格实例，当我调整浏览器窗口的大小时，列不会自动调整为表格的宽度，我们只使用一个 Ag-grid 实例来显示所有网格在页面中，但网格调整大小（onGridReady 事件）正在工作，它仅适用于最后加载的 Ag-grid，请帮助我，谢谢

function loadaggrid(id,rowdata,columndata)
    var gridOptions = 
                defaultColDef:
                    editable: false,
                    enableRowGroup:true,
                    enablePivot:true,
                    enableValue:true,
                    sortable: true,
                    resizable: true,
                    filter: true
                ,
                autoGroupColumnDef: 
                    width: 180
                ,

                animateRows: true,
                debug: false,
                suppressAggFuncInHeader: true,
                sideBar: 
                    toolPanels: [
                        id: 'columns',
                        labelDefault: 'Columns',
                        labelKey: 'columns',
                        iconKey: 'columns',
                        toolPanel: 'agColumnsToolPanel',
                        toolPanelParams: 
                            suppressPivots: true,
                            suppressPivotMode: true,
                        
                    ],
                ,
                rowSelection: 'single',
                columnDefs: cols,
                rowData: data,
                floatingFilter:true,
                paginationAutoPageSize:true,
                pagination: true,
                onGridReady: function (params) 
                    window.onresize = () => 
                        setTimeout(function()
                           params.api.sizeColumnsToFit();
                        ,500);
                    
                ,
                onFirstDataRendered(params) 
                    params.api.sizeColumnsToFit();
                
        

        new agGrid.Grid(id, gridOptions);

【参考方案1】：

您需要为每个网格实现不同的 onGridReady 函数。

//firstGridOptions:
onGridReady: (event) => 
 console.log('this is for first grid'); 
 this.firstGridApi.sizeColumnsToFit();
,

//secondGridOptions:
onGridReady: (event) => 
 console.log('this is for second grid'); 
 this.secondGridApi.sizeColumnsToFit();
,

【讨论】：

感谢您的回复，但对于 ag-grid 的所有实例，我们只使用一个 gridoption，我们只是将 colunms 和 rowData 发送到该选项，我已将示例代码添加到问题中

对应的 ag-grid 必须有不同的网格选项实例

谢谢您的回复，但在我的情况下，我们有一个仪表板，用户可以在其中为每个实例添加多个 ag-grid 表，我们无法编写代码，因为它是动态的，我们不知道有多少他可以添加到该仪表板

创建一个返回gridOption的函数。然后为每个网格获取一个选项并将其分配给您动态创建的网格。