ag-grid 的列排序不起作用

Question

我有一个 ag-grid，我正在向其中动态加载数据。我启用了列排序，但它不起作用。单击列 header 时没有任何反应。我不确定是什么问题。下面是我的代码：

    var colobj = {};
    for(i = 0; i< file.fieldMetadata.length; i++){

   var len = file.fieldMetadata[i].name.length;

   colobj = {'headerName' : file.fieldMetadata[i].name, 'field' : file.fieldMetadata[i].name, sortingOrder: ['asc','desc', 'null']};

vm.columnDefs.push(colobj);

    vm.gridOptions.api.setColumnDefs(vm.columnDefs);
    vm.gridOptions.api.setRowData(vm.fileContentsCols);
    vm.gridOptions.enableSorting = true;

Answer 1

enableSorting 在这里不起作用。只有调用 api 函数才有效。

您必须从一开始就设置 gridOptions.enableSorting = true（不是在收到数据之后）。

gridOptions 只是初始化的持有者。网格初始化后，api 字段可用于与网格交互，对参数的所有更改均无效。

Answer 2

想知道为什么 Angular 会发生这种情况的人：

我遇到了同样的问题，我正在动态设置 enableSorting 和其他布尔值，但在设置 columnDefs 之后。由于这种初始化顺序，enableSorting 无法正常工作。

我在 columnDefs 之前先初始化了我的布尔字段，它工作得很好:

  ngOnInit(): void {

    /* table setting should be initialed before setting data

{
    "tableHeight": 300,
    "tableClass": "ag-theme-balham",
    "enableSorting": true,
    "animateRows": true,
    "dragDrop": true,
    "enableColResize": true,
    "sortingOrder": ["desc", "asc", null]
  }

*/

     this.configService.getGeneralTableData().subscribe((x) => {
      this.generalTableSettings = x;
    } );

    this.configService.getTableHeaderColumnSettings().subscribe((x) => {
      this.columnDefs = x;
    });
  }

 <ag-grid-angular
    #agGrid
    style="width: 100%; height: 400px;"
    id="myGrid"
    [columnDefs]="columnDefs"
    [class]="generalTableSettings?.tableClass"
    [enableSorting]="generalTableSettings?.enableSorting"
    [animateRows]="generalTableSettings?.animateRows"
    [suppressDragLeaveHidesColumns]="generalTableSettings?.dragDrop"
    [enableColResize]="generalTableSettings?.enableColResize"
    [sortingOrder]="generalTableSettings?.sortingOrder"

    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

Answer 3

使用此方法作为比较器

numberComparator(aVal, bVal, nodeA, nodeB, isInverted) {

  if (aVal == bVal) {
    return 0;
  }

  if (isInverted == true) {

    if (_.isNil(aVal) || _.isNaN(aVal))
      return -1;

    if (_.isNil(bVal) || _.isNaN(bVal))
      return 1;
  }
  else {

    if (_.isNil(aVal) || _.isNaN(aVal))
      return 1;

    if (_.isNil(bVal) || _.isNaN(bVal))
      return -1;
  }

  return aVal < bVal ? -1 : 1;  
}

Answer 4

此处使用自定义排序，

如果您的行未与值绑定，则您使用自定义排序。

         {
            headerName: "Date",
            field: "date",
            //For Custom  Sorting
            comparator: (valueA, valueB, nodeA, nodeB, isInverted) => {
              valueA = moment(valueA).format('DD-MM-YYYY');
              valueB = moment(valueB).format('DD-MM-YYYY');
              if (valueA == valueB) {
                return 0;
              } else {
                return (valueA > valueB) ? 1 : -1;
              }
            },
            cellStyle: { 'text-align': 'left' },
            minWidth: 250,
        }

ag-grid 的列排序不起作用

column sorting for ag-grid not working

angularjs

ag-grid