ag-Grid

Question

我正在尝试对 Ionic 4/Angular 8 应用程序中 ag-Grid 中的列使用自定义排序。

我有一个示例应用程序 here, or on Stackblitz 我无法在 Stackblitz 上将其发送到运行，但它在本地肯定运行s，

无论如何有两件事要注意，我希望网格在虚拟模式下运行（例如可能有 1000 行数据），而且我已经设置 this.gridOptions.immutableData = true; 来处理我的数据来自 ng/rx.

我还使用一个组件作为单元格模板，但我认为我们可以在这里忽略它（使用现有示例）

我希望对行进行排序，因此同时调用我的 dateComparator 函数

当我第一次加载数据时
如果我添加或更新了任何数据

为了模拟来自服务器的新数据，我有一个调用 add 方法的添加按钮。

我在栏目上添加了一个comparator...

        public ngAfterViewInit(): void {                
            const self = this;
            this.gridOptions.immutableData = true;
            this.gridOptions.animateRows = true
            this.gridOptions.api.setColumnDefs([
            {
                    headerName: 'myheader',
                    comparator: self.dateComparator,
                    sortable: true,
                    field: 'equipment',
                    cellStyle: { padding: 0 },        
                    cellRendererFramework: TemplateRendererComponent,              
                    cellRendererParams: {
                        ngTemplate: this.itemCard
                    },        
                },
            ]);

            this.setData();
            }

    private dateComparator(valueA, valueB, nodeA, nodeB, isInverted): number {
       console.log('sorting');
       return 1;
     }

但是，当我加载网格或调用上面的添加方法时，我的 dateComparator 没有被调用。仅当我单击 header.

列时才会调用它

我试过调用 this.gridOptions.api.redrawRows() 但这不会导致它排序。我看不到任何其他明显的 sort 函数可以调用。

我的问题是，如何在不单击 header 列（即加载或更新数据时）的情况下自动应用此排序？

Answer 1

要默认对列进行排序，您必须在 colDef 中指定排序属性 -

sort: 'desc', // asc or desc

您也可以在使用排序初始化网格后执行此操作 api -

var sort = [
  {
    colId: 'country',
    sort: 'asc',
  },
  {
    colId: 'sport',
    sort: 'asc',
  },
];
this.gridApi.setSortModel(sort); // provide sort model here

现在，当您的数据更新并且您需要让网格知道按照您的自定义比较器保持排序时，您需要调用 - onSortChanged()

根据文档-

onSortChanged()
Gets the grid to act as if the sort was changed. Useful if you update some values and want to get the grid to reorder them according to the new values.

应用排序模型的示例here

ag-Grid - 如何在添加或修改数据后强制自定义排序

ag-Grid - how to force custom sorting after data is added or modified

angular

ag-grid-angular