如何在Ag-grid中使排序键不敏感？ [英] How to make sorting key insensitive in ag-grid?

问题描述

我正在某些网格中工作，我注意到所有网格上的排序都是关键敏感的，是否有任何方法可以更改它。这是我代码的一部分。

I am working in some grids and I notice that the sorting on all of them is key sensitive is there any way to change that. This is a part of my code.

 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,
},
  ];

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

Thank you for any possible given help.

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

This is how i have implement the solution by ##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());
  }

推荐答案

这可以通过使用需要特定列的自定义排序功能不区分大小写的排序。

This can be done by using a custom sorting function on the particular column that requires case-insensitive sorting.

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

For instance, for your columnDefs, if you require the name column to be sorted case insentitve, we pass the customComparator as the value for the comparator property. In your ngOnInit,

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

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

Then, we define the customComparator such that it carries out case-insentitive sorting. We do so by converting the values to lowercase on the custom comparator.

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

---

编辑：我分叉并重新创建了演示，以演示上述比较器的用法。有关相关详细信息，请参见constructor（）方法。

---

I have forked and recreated a demo from the original ag-grid demo to demonstrate the usage of the above comparator. Refer to the constructor() method for the relevant details.

这篇关于如何在Ag-grid中使排序键不敏感？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！