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

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

如何知道在 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}
    ];
}

假设如果我单击“制作列”一次进行“加法”，我需要在控制台排序的 Filed 属性 Make 和 asc 中打印，然后再次单击“make 列”将使加法归档为降序，因此它可以在控制台 Make 和 desc 上打印

此外，如果我将使用此导出到 csv 文件中，该文件可以导出当前选定的列排序，就像在 csv 表中一样

提前致谢

解决方法

您可以使用 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 会将您当前网格的列状态按原样导出为导出格式。