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

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

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

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

它是getDefaultColumnsDefinition()中的一列,我希望最初对其进行排序。我尽力了

  1. public onGridReady(params): void {
  2. this.gridApi = params.api;
  3. const sortModel = [
  4. {colId: 'recordStartTime', sort: 'desc'}
  5. ];
  6. this.gridApi.setSortModel(sortModel);
  7. this.gridApi.sizeColumnsToFit();
  8. }

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

5kgi1eie

5kgi1eie1#

感谢@Jon Black让我开始!
在我得知**setSortModel已被弃用**后,以下是对我有效的方法:

  1. function sortGrid(event, field, sortDir) {
  2. const columnState = { // https://www.ag-grid.com/javascript-grid-column-state/#column-state-interface
  3. state: [
  4. {
  5. colId: field,
  6. sort: sortDir
  7. }
  8. ]
  9. }
  10. event.columnApi.applyColumnState(columnState);
  11. }

  1. this.gridOptions = {
  2. defaultColDef: {
  3. sortable: true // enable sorting on all columns by default https://www.ag-grid.com/javascript-grid-sorting/
  4. },
  5. columnDefs,
  6. onGridReady: function (event) {
  7. console.log('The grid is now ready', event);
  8. sortGrid(event, 'timestamp', 'asc')
  9. },
  10. }
展开查看全部
9q78igpj

9q78igpj2#

从你所说的,你是在初始化一切之前调用API。我不是100%确定你是如何设置的,但是你应该在代码的onGridReady函数中进行这些调整。在onGridReady中,您可以执行类似以下操作:

HTML

  1. <ag-grid-angular
  2. class="ag-theme-balham"
  3. [rowData]="data"
  4. [columnDefs]="columnDefs"
  5. (gridReady)="onGridReady($event)"></ag-grid-angular>

TypeScript

  1. onGridReady(params): void {
  2. this.gridApi = params.api;
  3. this.gridColumnApi = params.columnApi;
  4. const sortModel = [
  5. {colId: 'recordStartTime', sort: 'desc'}
  6. ];
  7. this.gridApi.setSortModel(sortModel);
  8. }

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

展开查看全部
brgchamk

brgchamk3#

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

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

pes8fvy94#

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

  1. ColDef[] {
  2. return [
  3. ....
  4. {
  5. headerName: 'columnName1',
  6. field: 'columnField1',
  7. sort: 'desc',
  8. initialSortIndex: 1
  9. {
  10. headerName: 'columnName2',
  11. field: 'columnField2',
  12. sort: 'asc',
  13. initialSortIndex: 2
  14. },
  15. ...
  16. }

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

  1. <ag-grid-angular
  2. ...
  3. [multiSortKey]="'ctrl'"
  4. ...
  5. </ag-grid-angular>
展开查看全部

相关问题