ag-grid api方法

芬-mi發表於2024-08-14
API

ag-Grid 的 gridApi 提供了一系列功能，允許你對網格進行各種操作，如資料操作、過濾、排序、分頁等。以下是一些常用的 gridApi 方法及其功能：

資料操作

  1. setRowData(rowData): 設定網格的資料。

    gridApi.setRowData(myRowData);

  2. updateRowData(transaction): 更新網格的資料。

    const transaction = {
  add: [{...}],
  update: [{...}],
  remove: [{...}]
};
gridApi.updateRowData(transaction);

  3. getRowNode(id): 根據行 ID 獲取行節點。

    const rowNode = gridApi.getRowNode('someId');

  4. applyTransaction(transaction): 應用資料事務（新增、更新、刪除）。

    gridApi.applyTransaction({
  add: [{...}],
  update: [{...}],
  remove: [{...}]
});

過濾和排序

  1. setFilterModel(model): 設定過濾模型。

    gridApi.setFilterModel({
  colId: {
    type: 'contains',
    filter: 'text'
  }
});、

  2. getFilterModel(): 獲取當前的過濾模型。

    const filterModel = gridApi.getFilterModel();

  3. setSortModel(model): 設定排序模型。

    gridApi.setSortModel([
  { colId: 'field', sort: 'asc' }
]);

  4. getSortModel(): 獲取當前的排序模型。

    const sortModel = gridApi.getSortModel();

選擇

  1. selectAll(): 選擇所有行。

    gridApi.selectAll();

  2. deselectAll(): 取消選擇所有行。

    gridApi.deselectAll();

  3. getSelectedRows(): 獲取所有被選中的行資料。

    const selectedRows = gridApi.getSelectedRows();

  4. getSelectedNodes(): 獲取所有被選中的行節點。

    const selectedNodes = gridApi.getSelectedNodes();

分頁

  1. paginationGoToNextPage(): 跳轉到下一頁。

    gridApi.paginationGoToNextPage();

  2. paginationGoToPreviousPage(): 跳轉到上一頁。

    gridApi.paginationGoToPreviousPage();

  3. paginationGoToFirstPage(): 跳轉到第一頁。

    gridApi.paginationGoToFirstPage();

  4. paginationGoToLastPage(): 跳轉到最後一頁。

    gridApi.paginationGoToLastPage();

  5. paginationGoToPage(pageNumber): 跳轉到指定頁。

    gridApi.paginationGoToPage(2);

重新整理和重繪

  1. refreshCells(params): 重新整理單元格。

    gridApi.refreshCells({
  force: true, // 強制重新整理
  rowNodes: [rowNode], // 只重新整理特定行
  columns: ['colId'] // 只重新整理特定列
});

  2. redrawRows(params): 重繪行。

    gridApi.redrawRows({
  rowNodes: [rowNode] // 只重繪特定行
});

  3. refreshView(): 重新整理整個檢視。

    gridApi.refreshView();

其他

  1. sizeColumnsToFit(): 調整列寬以適應網格寬度。

    gridApi.sizeColumnsToFit();

  2. exportDataAsCsv(params): 匯出資料為 CSV 檔案。

    gridApi.exportDataAsCsv({
  fileName: 'my-data.csv'
});

  3. getDisplayedRowAtIndex(index): 獲取顯示的行節點。

    const rowNode = gridApi.getDisplayedRowAtIndex(0);

  4. getFirstDisplayedRow(): 獲取第一個顯示的行節點。

    const firstRowNode = gridApi.getFirstDisplayedRow();

  5. getLastDisplayedRow(): 獲取最後一個顯示的行節點。

    const lastRowNode = gridApi.getLastDisplayedRow();

相關文章