Angular：在 agGrid 中的动态列上设置默认排序的最佳方法答案

【问题标题】：Angular: Best way to set a default sort on a dynamic column in agGridAngular：在 agGrid 中的动态列上设置默认排序的最佳方法
【发布时间】：2020-03-21 06:42:42
【问题描述】：

我正在开发一个 agGrid，我们没有明确定义列。我一生无法弄清楚如何在我的一个列上设置默认排序。在初始化时，我们这样做：

public ngOnInit(): void {
    this.gridOptions.defaultColDef = this.selectable ? this.getDefaultColumnsDefinition() : null;
    this.showSpinner = true;
    this.getAllRefreshJobs();
}

这是getDefaultColumnsDefinition() 中我最初想要排序的列之一。我试过了

public onGridReady(params): void {
    this.gridApi = params.api;
    const sortModel = [
        {colId: 'recordStartTime', sort: 'desc'}
    ];
    this.gridApi.setSortModel(sortModel);
    this.gridApi.sizeColumnsToFit();
}

但它不起作用。网格看起来一样。有人可以帮忙吗？

【问题讨论】：

标签： angular typescript ag-grid

【解决方案1】：

根据您所说，您在初始化所有内容之前调用了 api。我不能 100% 确定您是如何进行此设置的，但您应该在代码的 onGridReady 函数中进行这些调整。在 onGridReady 中，您可以执行类似的操作：

HTML

<ag-grid-angular
    class="ag-theme-balham"
    [rowData]="data"
    [columnDefs]="columnDefs"
    (gridReady)="onGridReady($event)"></ag-grid-angular>

TypeScript

onGridReady(params): void {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    const sortModel = [
        {colId: 'recordStartTime', sort: 'desc'}
    ];
    this.gridApi.setSortModel(sortModel);
  }

这会公开当前的 gridApi 并允许您进行任何初始化后的修改。

【讨论】：

非常感谢！！我只是在研究 onGridReady .... 但它不起作用。 :-( 我会更新我的代码给你看。
其实我错了。当我浏览调试器时，我看到更改生效。但是随后某些内容会覆盖该列，并且我指定的选项会被重置...但是 onGridReady 绝对是我想要的。

【解决方案2】：

感谢@Jon Black 让我开始！

在我得知 setSortModel 已弃用后，这对我有用：

function sortGrid(event, field, sortDir) {
  const columnState = { // https://www.ag-grid.com/javascript-grid-column-state/#column-state-interface
    state: [
      {
        colId: field,
        sort: sortDir
      }
    ]
  }
  event.columnApi.applyColumnState(columnState);
}

与

this.gridOptions = {
      defaultColDef: {
        sortable: true // enable sorting on all columns by default https://www.ag-grid.com/javascript-grid-sorting/
      },
      columnDefs,
      onGridReady: function (event) {
        console.log('The grid is now ready', event);
        sortGrid(event, 'timestamp', 'asc')
      },
    }

【讨论】：

我刚刚登陆这里，非常感谢这个答案，然后注意到了作者。哈。谢谢你，过去的自己。