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

【问题标题】：How to get the column name by clicking the header of column in ag-grid如何通过单击 ag-grid 中的列标题来获取列名
【发布时间】：2021-03-05 04:16:55
【问题描述】：

如何通过单击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>

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

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

【问题讨论】：

ag-grid-angular-how-to-get-click-events-on-header
到目前为止我找到的最佳答案也在 stackoverflow 上：stackoverflow.com/questions/56337846/…。有关完整示例，请检查此 repo：github.com/ag-grid/ag-grid-angular-cli-example

标签： angular ag-grid

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

HTML：

<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();  // получение названия столбца
}

【讨论】：

你也应该对你的答案给出解释，而不仅仅是粘贴代码。

【解决方案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
        });
    }

【讨论】：