You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

AG-Grid单元格含'asc'/'desc'值时排序异常求助

AG-Grid排序异常:单元格值为'asc'/'desc'时排序功能失效

开发过程中发现AG-Grid存在异常:当某列的单元格值为'asc'或'desc'时,该列的排序功能无法正常工作。

以'Country Desc'列为例,按升序排序时,含'desc'的单元格被排在'Zimbabwe'之后,但正确位置应在'Denmark'之后。

问题截图

  • 问题截图
  • 排序对比截图

核心代码示例

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { ColDef, GridReadyEvent } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { IOlympicData } from './interfaces';

@Component({
  selector: 'my-app',
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>`,
})
export class AppComponent {
  public columnDefs: ColDef[] = [
    { field: 'athlete', sort: 'desc' },
    { field: 'age', width: 90 },
    { field: 'countryDesc' },
    { field: 'year', width: 90, unSortIcon: true },
    { field: 'date', comparator: dateComparator },
    { field: 'sport' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
    { field: 'total' },
  ];
  public defaultColDef: ColDef = {
    width: 170,
    sortable: true,
  };
  public rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<IOlympicData[]>(
        'https://www.ag-grid.com/example-assets/olympic-winners.json'
      )
      .subscribe((data) => {
        this.rowData = data.map(x => {
          // 处理数据,将Russia替换为'desc'
          return { ...x, countryDesc: x.country === 'Russia' ? 'desc' : x.country };
        });
      });
  }
}

function dateComparator(date1: string, date2: string) {
  const date1Number = monthToComparableNumber(date1);
  const date2Number = monthToComparableNumber(date2);
  if (date1Number === null && date2Number === null) {
    return 0;
  }
  if (date1Number === null) {
    return -1;
  }
  if (date2Number === null) {
    return 1;
  }
  return date1Number - date2Number;
}

// 示例:29/08/2004 转换为 20040829
function monthToComparableNumber(date: string) {
  if (date === undefined || date === null || date.length !== 10) {
    return null;
  }
  const yearNumber = Number.parseInt(date.substring(6, 10));
  const monthNumber = Number.parseInt(date.substring(3, 5));
  const dayNumber = Number.parseInt(date.substring(0, 2));
  return yearNumber * 10000 + monthNumber * 100 + dayNumber;
}

目前为赶项目期限,会考虑临时排序方案,但仍希望得到该问题的解决帮助。


内容的提问来源于stack exchange,提问作者Awesh Vishwakarma

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.06 09:20:41