AG-Grid 如何在不重新加载数据的前提下显示列排序图标

方案1：直接在列定义中预设排序状态（最推荐） #

不需要单独调用applyColumnState，直接在初始化列定义的时候给需要默认排序的列加上sort属性即可，setColumnDefs会直接识别该配置渲染排序图标，不会额外触发数据请求：

initGrid(viewParams: ViewParamsModel): void {
    this.firstLoad = false;
    // 处理列定义，给需要排序的列预设sort属性
    const columns = viewParams.columns.map(col => {
      if(col.colId === 'name') {
        return {...col, sort: 'asc'};
      }
      return col;
    });
    this.dataGrid.setColumnDefs(columns);
    // 无需额外调用applyColumnState，避免触发刷新
}

方案2：修改排序状态时禁止触发事件 #

如果必须在列定义设置完成后再调整排序状态，可以调用列实例的setSort方法，第二个参数传true即可抑制排序事件触发，不会发起数据请求：

initGrid(viewParams: ViewParamsModel): void {
    this.firstLoad = false;
    this.dataGrid.setColumnDefs(viewParams.columns);
    // 直接操作目标列，禁止触发排序事件
    const targetCol = this.gridColumnApi.getColumn('name');
    if(targetCol) {
      targetCol.setSort('asc', true);
    }
}

方案3：使用applyColumnState时临时屏蔽服务端排序触发 #

如果一定要使用applyColumnState方法，可以在调用前临时关闭服务端排序的触发开关，调用完成后再恢复配置即可：

initGrid(viewParams: ViewParamsModel): void {
    this.firstLoad = false;
    this.dataGrid.setColumnDefs(viewParams.columns);
    // 临时禁用服务端排序触发
    this.dataGrid.gridOptions.suppressServerSideSorting = true;
    this.gridColumnApi.applyColumnState({
         state: [
         {
            colId: 'name',
            sort: 'asc',
         }],
    });
    // 异步恢复原有配置，避免影响后续正常排序操作
    setTimeout(() => {
      this.dataGrid.gridOptions.suppressServerSideSorting = false;
    }, 0)
}

原理解释 #

AG Grid在服务端分页/排序模式下，默认所有排序状态的变更都会触发getRows重新拉取数据，只要在修改排序状态时抑制对应事件的触发，就可以实现仅渲染排序图标、不发起数据请求的效果。

内容的提问来源于stack exchange，提问作者KoosMos