javascript - 多个 sizeColumnsToFit() ag-grid React

Question

我的组件中有三个不同的 ag-grid React 表，其中包含特定的gridOptions和columnDefs. 我希望所有三个表都自动调整列大小以适应窗口调整大小的内容。

我使用onGridReady和sizeColumnsToFit()函数setTimeout来实现这一点。但问题是只有最后声明的ag-grid表会自动调整大小（好像之前的声明被忽略了）：

let gridOptions1 = {
    columnDefs: columnDefs1,

    onGridReady(params) {
      console.log(params)
      window.onresize = () => {
        setTimeout(() => {
          params.api.sizeColumnsToFit();
        }, 500);
      };
    },
    onFirstDataRendered(params) {
      params.api.sizeColumnsToFit();
    },
  };

let gridOptions2 = {
    columnDefs: columnDefs2,

    onGridReady(params) {
      console.log(params)
      window.onresize = () => {
        setTimeout(() => {
          params.api.sizeColumnsToFit();
        }, 500);
      };
    },
    onFirstDataRendered(params) {
      params.api.sizeColumnsToFit();
    },
  };

let gridOptions3 = {

    columnDefs: columnDefs3,

    onGridReady(params) {
      console.log(params)
      window.onresize = () => {
        setTimeout(() => {
          params.api.sizeColumnsToFit();
        }, 500);
      };
    },
    onFirstDataRendered(params) {
      params.api.sizeColumnsToFit();
    },
  };

  

在该示例中，该sizeColumnsToFit()函数仅适用于第三个网格。

您知道如何为所有表格做到这一点吗？

标签： javascriptreactjsag-gridag-grid-react

Answer 1

我发现的唯一解决方案是仅使用 onFirstDataRendered 函数（删除 onGridReady）并根据宽度和高度将特定键传递给 agggrid 表：

import React from 'react'
    
function debounce(fn, ms) {
      let timer
      return _ => {
        clearTimeout(timer)
        timer = setTimeout(_ => {
          timer = null
          fn.apply(this, arguments)
        }, ms)
      };
    }
    
function MyComponent() {
      const [dimensions, setDimensions] = React.useState({ 
        height: window.innerHeight,
        width: window.innerWidth
      })
      React.useEffect(() => {
        const debouncedHandleResize = debounce(function handleResize() {
          setDimensions({
            height: window.innerHeight,
            width: window.innerWidth
          })
        }, 1000)
    
    window.addEventListener('resize', debouncedHandleResize)
    
    return _ => {
          window.removeEventListener('resize', debouncedHandleResize)
        
    }
      })
      return <><AgGridReact
                            key={dimensions.width + dimensions.height}
                            rowData={data1}
                            gridOptions={gridOptions1}
                          ></AgGridReact>
<AgGridReact
                            key={dimensions.width + dimensions.height + "2"}
                            rowData={data2}
                            gridOptions={gridOptions2}
                          ></AgGridReact></>
    }