typescript Angular:在agGrid中对动态列设置默认排序的最佳方式

wqsoz72f  于 2023-06-24  发布在  TypeScript
关注(0)|答案(4)|浏览(215)

我正在开发一个agGrid,我们没有明确定义列。我一辈子都搞不清楚如何为我的一列设置默认排序。在init上,我们这样做:

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

但它不起作用网格看起来一样。有人能帮忙吗?

5kgi1eie

5kgi1eie1#

感谢@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')
      },
    }
9q78igpj

9q78igpj2#

从你所说的,你是在初始化一切之前调用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,并允许您进行任何初始化后的修改。

brgchamk

brgchamk3#

如果默认情况下正在查看排序*分组行

autoGroupColumnDef: ColDef = {
    field: 'yourFieldName',
    sort: 'orientation' // 'asc' or 'desc'
  };
this.gridOptions = {
    autoGroupColumnDef: this.autoGroupColumnDef
  };
pes8fvy9

pes8fvy94#

我不知道这对你来说是否是一个好的解决方案。但是在ColDef[]{中,您可以设置sort: asc | descinitialSortIndex: 1 | 2
示例:

ColDef[] {
    return [
     ....
      {
        headerName: 'columnName1',
        field: 'columnField1',
        sort: 'desc',
        initialSortIndex: 1
      {
        headerName: 'columnName2',
        field: 'columnField2',
        sort: 'asc',
        initialSortIndex: 2
      },
    ...
 }

在模板部分,你可以设置'ctrl'键为关键使用多重排序在ag-grid一样

<ag-grid-angular
...
[multiSortKey]="'ctrl'"
...
</ag-grid-angular>

相关问题