ag-grid 服务器端排序/分页社区版 Angular答案

【问题标题】：ag-grid server side sorting/pagination community version Angularag-grid 服务器端排序/分页社区版 Angular
【发布时间】：2021-07-14 15:33:47
【问题描述】：

我为 datagrid 安装了 ag-grid 库，服务器端排序和分页是在 NodeJs 中实现的，现在我试图找到应该触发哪些事件控制器以调用相关方法。如果您之前实施过，请告知。

  <ag-grid-angular
    style="width: 100%; height: 500px;"
    id="myGrid"
    class="ag-theme-fresh"
    [rowData]="rows"
    [overlayLoadingTemplate]="overlayLoadingTemplate"
    [sideBar]="true"
    [defaultColDef]="defaultColDef"
    [columnDefs]="columnDefs"
    [suppressDragLeaveHidesColumns]="true"
    [rowClassRules]="rowClassRules"
    [rowSelection]="'multiple'"
    [suppressRowClickSelection]="true"
    (selectionChanged)="onSelectionChanged($event)"
    (gridReady)="onLoadTableData($event)"
  >
  </ag-grid-angular>

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

我通过添加 (selectionChanged)="onSelectionChanged($event)" 事件控制器来解决这个问题

const sortState = this.gridApi.getSortModel(); to printSortStateToConsole()

 public printSortStateToConsole(params) {
    const sortState = this.gridApi.getSortModel();
    if (sortState.length == 0) {
      console.log("No sort active");
    } else {
      console.log("State of sorting is:", sortState[0].colId, sortState[0].sort);
      this.page.orderDir = sortState[0].sort;
      this.page.orderBy = sortState[0].colId;
      this.reloadTable();

    }
  }

  <ag-grid-angular
    style="width: 100%;"
    id="myGrid"
    class="ag-theme-fresh"
    [rowData]="rows"
    [overlayLoadingTemplate]="overlayLoadingTemplate"
    [sideBar]="true"
    [defaultColDef]="defaultColDef"
    [enableServerSideSorting]="true"
    [columnDefs]="columnDefs"
    [suppressDragLeaveHidesColumns]="true"
    [rowClassRules]="rowClassRules"

    [suppressRowClickSelection]="true"

    [pagination]="true"
    [paginationPageSize]="page.size"
    (paginationChanged)="printPaginationStateToConsole($event)"

    (sortChanged)="printSortStateToConsole($event)"

    [rowSelection]="'multiple'"
    (selectionChanged)="onSelectionChanged($event)"

    (gridReady)="onLoadTableData($event)"
  >
  </ag-grid-angular>

【讨论】：