ag-grid 的列排序不起作用答案

【问题标题】：column sorting for ag-grid not workingag-grid 的列排序不起作用
【发布时间】：2016-04-11 00:30:50
【问题描述】：

我有一个 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;

【问题讨论】：

标签： angularjs ag-grid

【解决方案1】：

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

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

gridOptions 仅仅是初始化的持有者。网格初始化后，api 字段可用于与网格交互，所有对参数的更改都将不起作用。

【讨论】：

你能举个例子吗？在我的表格中，我正在生成数据，然后使用自定义 cellRenderer 设置 columnDefs，然后设置 gridOptions，创建一个新网格，然后使用 gridOptions.api.setRowData(data); 填充网格；任何使用自定义 cellRenderer 的列都不会排序。
我已经停止使用 angularjs1 的第 3 版 ag-grid。我的样本可能不是最新的。您应该提出一个包含足够详细信息的新问题。如果您使用 customCellRenderer，您可能需要重载 valueGetter。并不是说我是从服务器处理排序，所以我对前端排序不太熟悉。
对于那些为此苦苦挣扎的人，我正在使用 ag-grid-react v21。我必须在传递给 AgGridReact 组件的列定义中设置 sortable: true，然后使用 colId 调用 api.setSortModel。例如。 <AgGridReact columnDefs={[{colId: 'myColId', sortable: true, ...}, ...]} 和 api.setSortModel([{colId: 'myColId', sort: 'desc'}]).
@GalenLong 你帮助了我，但从 v24 开始，setSortModel 方法已被弃用。新方式类似：columnApi.applyColumnState({ state: [{ colId: FieldDescr, sort: 'asc' }] })。我在onGridReady 事件中调用它。

【解决方案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;  
}

【讨论】：

【解决方案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,
        }

【讨论】：

您可以使用带有 3 个反引号的代码块来创建代码

【解决方案4】：

对于想知道为什么在 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>

【讨论】：