因為會忘,所以要寫下來

使用 ag-grid 讀取 server 端分頁 ( Ag-grid server-side with paginated RESTful API and Angular )

先稍微介紹分頁會用到的 gridOptions 功能

  • rowBuffer: 0; //在網格呈現的可滾動可視區域外部呈現的行數。預設為 20 有一個緩衝區意味著當用戶緩慢地垂直滾動時,表格將準備顯示行。
  • rowSelection: ‘multiple’; //多行選擇
  • cacheOverflowSize: 2; //緩存大小
  • maxConcurrentDatasourceRequests: 1; //最大並發數據源請求 發出 Requests 請求
  • infiniteInitialRowCount: 1000; //最初允許在網格中滾動多少行。 一次幾行
  • maxBlocksInCache: 10; //緩存中要保留多少頁面。

基本分頁設定

  • pagination: true, // 是否開啟分頁功能 或 無限捲動
  • rowModelType: ‘infinite’
  • cacheBlockSize: 20 一次下載 20 筆總筆教
  • paginationPageSize: 10 一頁呈現 10 筆
import { IDatasource, IGetRowsParams, GridOptions, GridApi } from 'ag-grid-community';
// 此部份需引入 GridOptions, GridApi
gridApi: GridApi;
gridOptions: GridOptions = {
  pagination: true,
  rowModelType: 'infinite',
  cacheBlockSize: 20, // you can have your custom page size
  paginationPageSize: 20, //pagesize
};

getRows 函數為您提供特定頁面的開始和結束索引。 params.successCallback:它有兩個參數, 第一個是 api 資料 第二個是 api 資料總筆數 Ag-grid 使用第二個參數來決定總頁數。

餵給 getRows 的資料必需是 observable 屬性 讓它可被訂閱 被 subscribe 時 必需是 getRows 格式

如下

rowData = [
  { make: 'Toyota', model: 'Celica', price: 35000 },
  { make: 'Ford', model: 'Mondeo', price: 32000 },
  { make: 'Porsche', model: 'Boxter', price: 72000 },
];
dataSource: IDatasource = {
  getRows: (params: IGetRowsParams) => {
    // Use startRow and endRow for sending pagination to Backend
    // params.startRow : Start Page
    // params.endRow : End Page
    //replace this.apiService with your Backend Call that returns an Observable
    this.apiService().subscribe((response) => {
      params.successCallback(response.data, response.totalCount);
    });
  },
};

初始化設定

// API 讀取資料
apiService() {
  return this.httpclient.get('https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json')
}

onGridReady(params: any) {
  this.gridApi = params.api;
  // api資料來源
  this.gridApi.setDatasource(this.dataSource) // replace dataSource with your datasource
}

HTML 設定

<ag-grid-angular
  style="width: 100%; height: 100%;"
  class="ag-theme-balham"
  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

DEMO: angular_ag-grid_infinite

參考資料:
https://stackoverflow.com/questions/47338347/ag-grid-server-side-pagination
https://www.ag-grid.com/javascript-grid-infinite-scrolling/


對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular