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
相关产品推荐
相关产品推荐



