如何在 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 name with on. For example, the callback for the cellClicked event is 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>

如何在 jquery 内触发 Ag-Grid Resize

How to fire Ag-Grid Resize inside jquery

jquery

ag-grid