angular - 如何在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

这可以通过在需要区分大小写的特定列上使用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，以便它执行区分大小写的排序。我们通过在自定义比较器上将值转换为小写来实现。

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

编辑:我已经从原始的ag-grid演示中 fork 并重新创建了一个 demo，以演示上述比较器的用法。有关相关详细信息，请引用Constructor()方法。