AG Grid - 如果没有对其他列进行排序，则恢复默认排序

Question

我的 ag-grid 有一个默认排序 this.options.defaultSortColumn，数据在初始化后按此排序。现在当用户按另一列排序然后再次删除排序时（通过单击 header 3 次），我想恢复默认排序并再次按默认列对数据进行排序。我尝试了以下方法：

postSort () {
  if (this.gridApi) {
    let currentSort = this.gridApi.getSortModel()
    console.log(currentSort)
    if (this.options.defaultSortColumn && currentSort && currentSort.length === 0) {
      // reset default sort, if no other sort is active
      this.gridApi.setSortModel({
        colId: this.options.defaultSortColumn,
        sort: (this.options.defaultSortDir || 'asc').toLowerCase()
      })
    }
  }
}

但这会导致 Maximum call stack size exceeded，我假设是因为它设置了排序，然后在更新 getSortModel() 之前再次运行 postSort 事件，所以它一直调用事件一遍又一遍。难道我做错了什么？还是有其他方法可以在没有其他列排序时恢复默认排序？

Answer 1

为了达到预期的结果，使用下面的 ag 网格事件 - onSortChanged 并检查当前排序的长度

加载时将默认排序分配给变量（比如 defaultSort）
使用onSortChanged网格API事件，检查currentsort长度

onSortChanged: (e) => { console.log(e.api.getSortModel()) }
如果长度为0，设置默认排序使用this.gridApi.setSortModel（默认排序）

Answer 2

您还可以将 gridOptions 状态重置为初始化网格时的状态。

this.gridColumnApi.resetColumnState();

来自文档 -

resetColumnState() - Sets the state back to match the originally provided column definitions.

Answer 3

总结一下，因为存在一些混乱。 setSortModel 函数应该有一个数组作为参数而不是对象。

正确的方式（React例子）

  <AgGridReact onSortChanged={e => {
     if (!e.api.getSortModel().length) {
       e.api.setSortModel([
         {
          colId: 'columnId',
          sort: 'desc' // 'asc'
         }  
       ])
     }   
   }

AG Grid - 如果没有对其他列进行排序，则恢复默认排序

AG Grid - restore default sort if no other column is sorted

javascript

sorting

vue.js

ag-grid