如何知道在 Angular 中的 Ag-Grid 中选择了哪个列进行排序并且是升序还是降序

Question

如何知道在 Angular 中为 Ag-Grid 中的排序选择了哪个列并且是升序还是降序

Html

<ag-grid-angular 
    [enableSorting]="true"
    [rowData]="rowData" 
    [columnDefs]="columnDefs">
</ag-grid-angular>

ts

import {Component} from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    columnDefs = [
        {headerName: 'Make', field: 'make'},
        {headerName: 'Model', field: 'model'},
        {headerName: 'Price', field: 'price'}
    ];

    rowData = [
        {make: 'Toyota', model: 'Celica', price: 35000},
        {make: 'Ford', model: 'Mondeo', price: 32000},
        {make: 'Porsche', model: 'Boxter', price: 72000}
    ];
}

假设如果我点击 Make Columns 一次来制作 Acccending 我需要在控制台中打印 sorted Filed 属性 Make 和 asc 并再次点击 make Column 将使 accending filed 变为 decending 所以它会在控制台上打印制造和描述

另外，如果我将通过使用它导出到 csv 文件中，那么可以导出当前选定的列排序为 csv sheet

提前致谢

Answer 1

您可以使用 ag-grid 的 columnApi 来获取 columnState。

在您的组件 html 中，执行以下操作：

<ag-grid-angular
 [enableSorting]="true"
 [rowData]="rowData" 
 [columnDefs]="columnDefs"
 (gridReady)='onGridReady($event)'
 (sortChanged)='onSortChanged($event)'
</ag-grid-angular>

接下来，在您的组件中，执行以下操作：

public colApi : ColumnApi;

onGridReady(event: GridReadyEvent): void
{
  this.colApi = event.columnApi;
}

onSortChanged ()
{
  let columnWithSort = this.colApi.getColumnState().find(col => col.sort !== null);
  console.log("Column that is sorted right now is " + columnWithSort.field);
  console.log("The sort order right now is " + columnWithSort.sort);  // prints "asc" or "desc"
}

您不需要对按特定排序顺序导出网格进行任何特殊处理。 Ag-grid 将按原样将当前网格的列状态导出为导出格式。

如何知道在 Angular 中的 Ag-Grid 中选择了哪个列进行排序并且是升序还是降序

How to know which Column is selected for Sort in Ag-Grid in Angular and is Acending or Decending

angular

ag-grid

ag-grid-angular

ag