0

如何知道在 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 一次以进行 Accending 我需要在控制台中打印排序 Filed Property Make 和 asc 并再次单击 make Column 将使 accending 归档到 decending 所以它会在控制台上打印 Make 和 desc

另外，如果我将使用此导出到 csv 文件中，该文件将导出当前选定的列排序，如在 csv 表中

提前致谢

4

1 回答 1

0

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

于 2021-03-24T08:29:41.573 回答