angularjs ag-grid列排序不工作

v2g6jxz6  于 2023-06-21  发布在  Angular
关注(0)|答案(5)|浏览(258)

我有一个ag-grid,我正在动态地加载数据。我已经启用了列排序,但它不起作用。当我点击列标题时没有任何React。我不知道是什么问题。下面是我的代码:

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;
mfpqipee

mfpqipee1#

enableSorting在这里不起作用。只有调用API函数才能工作。
您必须从一开始就设置gridOptions.enableSorting = true(而不是在接收数据之后)。
gridOptions仅仅是初始化的保持器。一旦网格初始化,API字段就可以与网格交互,所有对参数的更改都将无效。

wvt8vs2t

wvt8vs2t2#

使用此方法作为比较器

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;  
}
bd1hkmkf

bd1hkmkf3#

这里使用自定义排序,
如果行没有与值绑定,则使用自定义排序。

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

siv3szwd4#

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

hmmo2u0o5#

使用自定义排序。它会像那样工作

{
  headerName: 'Name',
  field: 'fieldname',
  width: 120,
  comparator: (value1, value2) => {   // check your own requirement 
    return value1 - value2;    
  },
}

有关更多信息,请阅读文档
https://www.ag-grid.com/javascript-data-grid/row-sorting/

相关问题