通过容器 div Id 获取 ag-grid 实例

Question

我知道，为了生成新的 ag-Grid，我们可以执行以下操作：

    new agGrid.Grid(gridDiv, gridOptions);

其中 gridDiv 是 ag-grid 的“容器 div”，而 gridOptions 是网格的选项。

如果我有它的“容器 div”ID，是否可以获取网格实例？ 我基本上想访问它的gridOptions / gridOptions.api

Answer 1

此答案假定您有权访问代码。

如果您可以控制gridOptions，则可以访问 API。一旦网格被初始化，这意味着在执行此行之后

new agGrid.Grid(eGridDiv, gridOptions);

它将gridApi 和columnApi 传递给您的gridOptions。您可以开始随心所欲地操作桌子。这是一个小例子

// at this point you don't have accesss to the API yet
var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
};

var eGridDiv = document.querySelector('#myGrid');

// initialize ag-grid
new agGrid.Grid(eGridDiv, gridOptions);

// grid APIs are ready, we can print current column state for example
console.log(gridOptions.columnApi.getColumnState());

setTimeout(() => {
  var sort = [
    { colId: 'price', sort: 'desc' },
  ];
  gridOptions.api.setSortModel(sort);
}, 2000)

观看现场演示here

参考

• https://www.ag-grid.com/javascript-grid