如何在 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 的使用是正确的

回调的名称是通过在事件名称前加前缀来构造的 开。例如，cellClicked 事件的回调是 gridOptions.onCellClicked。

但是，您的某些 gridOptions，例如 enableSorting 和 enableFilter 没有记录在案 - 我认为这是无效的。对于排序，您可以在defaultColDef 下使用sortable: true，记录在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

Answer 2

我同意@95faf8e76605e973 所说的一切。

此外，我在不使用onFirstDataRendered 的情况下让它工作：

var columnDefs = [
  {headerName: "Make", field: "make"},
  {headerName: "Model", field: "model"},
  {headerName: "Price", field: "price"}
];
    
// specify the data
var rowData = [
  {make: "Maserati", model: "bolona", price: 35000},
  {make: "Tesla", model: "Max", price: 32000},
  {make: "Ferrari", model: "Red horse", price: 72000}
];
    
// let the grid know which columns and what data to use
var gridOptions = {
  columnDefs: columnDefs,
};

function fetchData (rowData){
  return Promise.resolve(rowData);
}

$(document).ready(()=>{
   var gridDiv = document.querySelector('#myGrid');
   new agGrid.Grid(gridDiv, gridOptions);
   
   fetchData(rowData).then(res=>{
     gridOptions.api.setRowData(res);
     myGrid.api.refreshView();
     gridOptions.columnApi.sizeColumnsToFit();
   });
   
});

<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.noStyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css">
<div id="myGrid" style=" width:500px;height: 200px;" class="ag-theme-alpine"></div>