如何通过单击 ag-grid 中的列标题获取列名

Question

如何通过在 ag-grid 中单击列的标题来获取列标题的名称，实际上我想在单击列标题时执行服务器端排序和过滤，为此，我需要在事件。

HTML模板

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

TS

rowData;
columnDefs = [
{
    headerName: "name",
    field: "athlete",
},
{
  headerName: "Status",
  field: "age"
}
];

onGridReady(params: any) {
  this.service.getData().subscribe((e)=>{
    this.rowData = e;
  });
}

Answer 1

在撰写本文时，在 ag-grid 中没有监听标题列点击的事件。 您的选择是：

• 编写自定义标题组件（ https://www.ag-grid.com/javascript-grid-header-rendering/ ）
• 收听 'sortChanged' 事件（详见https://stackoverflow.com/a/56030626/960857 ）

Answer 2

网址：

<ag-grid-angular style="width: 500px; height: 500px"
                 class="ag-theme-balham"
                 [rowData]="tableRows"
                 [columnDefs]="columnDefs"
                 (sortChanged)="sort($event)">
</ag-grid-angular>

JS：

sort(event): void {
  const fieldName = event.api.getSortModel();  // получение названия столбца
}

Answer 3

没有这样的功能来监听点击了哪一列的标题。 api.getSortModel() 已弃用，排序信息现在是列状态的一部分。 要收听您单击的标题，您必须从 columnApi 和 getColumnState() 函数中提取它。

它返回 col Id 和排序类型 (asc,desc,null)。 每三次点击将被视为空值。

所以要找到列名，你可以遍历 columnApi.getColumnState() 并且 col ID 可以用 columnDefs 映射

<AgGridReact
       columnDefs={this.state.columnDefs}
       onSortChanged={this.sortChanged}
/>

sortChanged = (val) => {
        const columnSortState = val.columnApi.getColumnState();
        const columns = this.state.columnDefs;
        columns.map((column,i) => {
            Do your code magic here
        });
    }

`