单页多Ag-Grid实例窗口resize时列未自适应问题求助

The root cause of your issue is straightforward: every time you initialize an Ag-Grid instance, you're overwriting the global window.onresize event handler with a new function. That's why only the last loaded grid responds to resize events—its handler replaces all previous ones.

Here's how to fix this by tracking all grid instances and triggering resize logic for every grid when the window resizes:

Step 1: Track All Grid APIs #

First, create a global array to store references to every Ag-Grid API instance. This lets us iterate over all grids later.

Step 2: Modify Your loadaggrid Function #

Update the function to add each grid's API to our tracking array, and remove the per-instance window.onresize assignment (since we'll handle resize globally).

Step 3: Add a Single Global Resize Listener #

Set up one resize listener that loops through all tracked grid APIs and calls sizeColumnsToFit() for each.

Here's the revised code:

// Global array to track all Ag-Grid API instances
const gridApis = [];

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: columndata, // Fixed: use the passed columndata instead of undefined 'cols'
    rowData: rowdata, // Fixed: use the passed rowdata instead of undefined 'data'
    floatingFilter: true, 
    paginationAutoPageSize: true, 
    pagination: true, 
    onGridReady: function (params) { 
      // Add this grid's API to our tracking array
      gridApis.push(params.api);
      // Initial column fit
      params.api.sizeColumnsToFit();
    }, 
    onFirstDataRendered: function(params) { 
      params.api.sizeColumnsToFit(); 
    },
    // Optional: Clean up when a grid is destroyed
    onGridDestroyed: function(params) {
      const apiIndex = gridApis.indexOf(params.api);
      if (apiIndex !== -1) {
        gridApis.splice(apiIndex, 1);
      }
    }
  };

  new agGrid.Grid(id, gridOptions); 
}

// Single global resize handler for all grids
window.addEventListener('resize', () => {
  setTimeout(() => {
    gridApis.forEach(api => {
      // Ensure the API is still valid before calling
      if (api?.sizeColumnsToFit) {
        api.sizeColumnsToFit();
      }
    });
  }, 500);
});

Key Changes Explained: #

• No more overwriting window.onresize: We use addEventListener instead, which lets multiple listeners coexist (though we only need one here).
• Centralized resize logic: One handler that updates every grid instance, not just the last one.
• Fixed variable references: Corrected cols → columndata and data → rowdata (your original code used undefined variables here).
• Optional cleanup: The onGridDestroyed event removes APIs from the tracking array when grids are removed, preventing invalid calls and memory leaks.

This approach ensures every Ag-Grid instance on your page will automatically resize when the browser window changes size.

内容的提问来源于stack exchange，提问作者GnanaSagar reddy