jquery - 如何在 jquery 中触发 Ag-Grid Resize

Question

我正在使用 jQuery。在 document.ready 函数之外，我正在设置我的 ag-grid。

const columnDefs = [
    { headerName: 'ID', field: 'id' },
    { headerName: 'Name', field: 'name' },
    { headerName: 'Age', field: 'age' }
];

const gridOptions = {
    defaultColDef: {
        resizable: true
    },
    columnDefs: columnDefs,
    enableSorting: true,
    enableFilter: true,
    onFirstDataRendered: onFirstDataRendered,
};

document.addEventListener('DOMContentLoaded', function () {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

function onFirstDataRendered(params) {
    params.api.sizeColumnsToFit();
}

该文档说使用 OnFirstDataRendered 来调整大小，但我收到一条警告，指出它是 invalidGridOptions。我忽略了警告并继续。网格行在 API 调用后通过

gridOptions.api.setRowData(gridData)

，但不调用resize方法；因此，我的列没有调整大小。
我曾尝试使用 onRowDataUpdated 代替，但我得到了相同的结果，该函数没有被命中，也没有调整列的大小。

Answer 1

onFirstDataRendered是一个有效的 gridOption，它是一个事件，如 docs 中所示.您对 onFirstDataRendered 的使用是正确的

The name of the callback is constructed by prefixing the event namewith on. For example, the callback for the cellClicked event isgridOptions.onCellClicked.

但是，您的一些 gridOptions ，例如 enableSorting & enableFilter没有记录 - 我认为这是无效的。对于排序，您可以使用 sortable: true下 defaultColDef记录在案 here .我认为这就是您的控制台打印的关于无效选项的内容
您可以在下面看到第一次获取数据后调整大小确实起作用(由于 onFirstDataRendered 回调)，并且很明显(如果您注意)，在将数据放入网格后的一瞬间，大小确实发生了变化

const columnDefs = [
  { headerName: 'ID', field: 'id' },
  { headerName: 'Name', field: 'name' },
  { headerName: 'Age', field: 'age' },
];

// let the grid know which columns and what data to use
var gridOptions = {
  defaultColDef: {
    resizable: true,
    sortable: true
  },
  columnDefs: columnDefs,
  //enableSorting: true,
  //enableFilter: true,
  onFirstDataRendered: onFirstDataRendered,
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
  sampleReqToSetRowData();
});

/**
 * autosize all columns (https://www.ag-grid.com/javascript-grid-resizing/#resizing-example)
 */
function autoSizeAll() {
  var allColumnIds = [];
  gridOptions.columnApi.getAllColumns().forEach(function (column) {
    allColumnIds.push(column.colId);
  });

  gridOptions.columnApi.autoSizeColumns(allColumnIds);
}

function onFirstDataRendered(params) {
  //commented code below can instead be used for sizing columns to fit
  //params.api.sizeColumnsToFit();
  //console.log(`Fired sizeColumnsToFit`, params.api.sizeColumnsToFit);
  
  //will auto size all columns. see link provided in function declaration for more info
  autoSizeAll();
}

/**
 * just a sample to simulate API call to remote server to fetch some grid data
 */
function sampleReqToSetRowData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      var rowData = [
        { id: '0', name: 'Celica', age: 20 },
        { id: '1', name: 'Mondeo', age: 21 },
        { id: '2', name: 'Boxterrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr', age: 22 },
      ];
      gridOptions.api.setRowData(rowData);
      resolve();
    }, 2000);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>

<div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>

补充引用: https://www.ag-grid.com/javascript-grid-resizing/#resize-after-data