如何在 jQuery 中触发 Ag-Grid 的调整大小功能

Question

如何在 jQuery 中触发 Ag-Grid 的调整大小功能

4

我正在使用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进行调整大小，但我收到了一个无效的GridOptions警告。我忽略了警告并继续操作。通过API调用设置网格行：

gridOptions.api.setRowData(gridData)

但调整大小方法未被调用，因此我的列没有被调整大小。我尝试使用onRowDataUpdated，但结果相同，该函数没有被触发且不会调整列大小。

- user1019042

你正在使用哪个版本的AG-grid？ - sandeep joshi

2个回答

1

我同意 @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>

- nishkaush

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 95faf8e76605e973 · Accepted Answer

onFirstDataRendered是一个有效的gridOption，它是一个事件，如在文档中所示。你对onFirstDataRendered的使用是正确的。

回调函数的名称是通过在事件名前加上on构造的。例如，cellClicked事件的回调是gridOptions.onCellClicked。

然而，您的一些gridOptions，如enableSorting和enableFilter未记录 - 我认为这是无效的。对于排序，您可以在此处记录的defaultColDef下使用sortable: true。我认为这就是您的控制台打印与无效选项相关的内容。

您可以看到，在数据首次获取后（由于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

该链接介绍了如何在数据加载后调整JavaScript表格的大小。