如何使排序键在 ag-grid 中不敏感？

Question

我在一些网格中工作，我注意到所有网格的排序都是关键敏感的，有没有办法改变它。这是我的代码的一部分。

 columnDefs = [
{
  headerName: 'Id', field: 'id', sort: 'asc', sortable: true, filter: true,
  checkboxSelection: true, resizable: true,
},
{
  headerName: 'Name', field: 'name', sortable: true, filter: true,
  checkboxSelection: false, editable: true, resizable: true,
},
{
  headerName: 'Description', field: 'description', sortable: true, filter: true,
  checkboxSelection: false, editable: true, resizable: true,
},
  ];

感谢您提供的任何可能的帮助。

这就是我通过##wentjun##实现解决方案的方式：

  constructor(private dialog: MatDialog, private adminService: AdminService) {}

  columnDefs = [
    {
      headerName: 'Id', field: 'id', sortable: true, filter: true,
      checkboxSelection: true, resizable: true,
    },
    {
      headerName: 'Name', field: 'name', sortable: true, filter: true,
      checkboxSelection: false, editable: true, resizable: true,
      comparator: this.customComparator,
    },
    {
      headerName: 'Description',  field: 'description', sortable: true, filter: true,
      checkboxSelection: false, editable: true, resizable: true,
    },
  ];

  customComparator(valueA, valueB) {
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
  }

Answer 1

这可以通过在需要 case-insensitive 排序的特定列上使用 custom sorting function 来完成。

例如，对于您的 columnDefs，如果您需要对 name 列进行大小写排序，我们将 customComparator 作为 comparator 的值属性。在你的 ngOnInit 中，

this.columnDefs = [
  {
    headerName: 'Name',
    field: 'name',
    sort: 'asc',  // optional, allows grid column to be sorted on init
    comparator: customComparator
  },
  // other columns
];

然后，我们定义customComparator，使其执行case-insentitive排序。我们通过在自定义比较器上将值转换为小写来实现。

const customComparator = (valueA, valueB) => {
  return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
};

编辑：我从原始的 ag-grid 演示中分叉并重新创建了一个 demo 来演示上述比较器的用法。相关细节参考constructor()方法

Answer 2

2020-07 年更新，agTextColumnFilter 默认的 ag-Grid 过滤器接受参数。其中之一是 caseSensitive。 See sample

Answer 3

请注意，此时您只需将GridOptions中的accentedSort 属性设置为true即可实现不区分大小写的排序。 See here for more information.

如果您使用 wentjun 的自定义比较器解决方案，请确保仅将其应用于字符串列，或者在应用于所有列时，检查值是否为字符串。否则排序将不再适用于基于数字的列：

const customLowerCaseComparator = (valueA, valueB) => {
  if (typeof valueA === 'string') {
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
  }

  return (valueA > valueB? 1 : (valueA < valueB ? -1 : 0));
};

如何使排序键在 ag-grid 中不敏感？

How to make sorting key insensitive in ag-grid?

typescript

ag-grid

angular