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

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

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
        });
    }

`

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

3 个答案: