Question

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

    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

使用此方法作为您的比较器

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 3

这里使用自定义排序，

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

         {
            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,
        }

Answer 4

对于想知道为何在Angular中发生这种情况的人：

我遇到了同样的问题，我在设置columnDefs之后动态设置了enableSorting和其他布尔值。由于这种初始化顺序，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>

ag-grid的列排序不起作用

4 个答案: