ag-grid javascript 库在单个页面上使用多个网格时给出最大调用堆栈错误

Question

使用 ag-grid javascript 库时，当您在单个页面上使用多个网格时，ag-grid 会显示错误：

ag-grid-enterprise.min.js:8 Uncaught RangeError: Maximum call stack size exceeded
    at h (ag-grid-enterprise.min.js:8:100503)
    at ag-grid-enterprise.min.js:8:100725
    at ag-grid-enterprise.min.js:8:99580
    at Array.forEach (<anonymous>)
    at n (ag-grid-enterprise.min.js:8:99552)
    at h (ag-grid-enterprise.min.js:8:100572)
    at ag-grid-enterprise.min.js:8:100725
    at ag-grid-enterprise.min.js:8:99580
    at Array.forEach (<anonymous>)
    at n (ag-grid-enterprise.min.js:8:99552)

Answer 1

原因是因为我在网格中重复使用相同的“gridOptions”。解决方案是每次通过函数需要 gridOption 对象时生成一个新的：

function createGridOptions() {
// Grid Options are properties passed to the grid
    const gridOptions = {

        // default col def properties get applied to all columns
        defaultColDef: {
            flex: 1,
            minWidth: 100,
            // allow every column to be aggregated
            enableValue: true,
            // allow every column to be grouped
            enableRowGroup: true,
            // allow every column to be pivoted
            enablePivot: true,
            sortable: true,
            filter: true,
            resizable: true

        },
        //width: 700,
        sideBar: true,
        rowSelection: 'multiple', // allow rows to be selected
        animateRows: true, // have rows animate to new positions when sorted

        // example event handler
        onCellClicked: params => {
            console.log('cell was clicked', params)
        }
    };
    return gridOptions;
}