Ag-grid中的最高行号

Question

我正在尝试查找 Ag-grid 中的最高行号。每当在数据库中插入新行并显示在网格上时，我必须用某种颜色突出显示最新的行。我已经在提供的 link 中看到一些代码，其中可以根据列中的某个值突出显示一行，但我试图确定该值是否是最高行号。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

如果您要查找编号的计数。 of rows 或者最后一行的行节点对象，可以通过gridAPI对象获取。这是指南：https://www.ag-grid.com/javascript-data-grid/grid-api/

希望您已经通过 (gridReady)

存储了网格 API 对象

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

Answer 2

你需要有一个函数来获取“元素最大值”。想象一下像

这样的行数据

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

所以你有

  @ViewChild('agGrid',{static:true}) agGrid: AgGridAngular; //<--to get the grid
  maximum: any; //<--here we store the greater element

  //your function getGreaterElement
  getGreaterElement()
  {
      //get the element with bigger price
      this.maximum=this.rowData.reduce((a,b)=>+b.price>+a.price?b:a)
      if (this.agGrid.api) //if exist the api
        this.agGrid.api.redrawRows();  //redraw the grid
  }

你添加 class 的函数（记住你需要在 styles.css 中添加 class，而不是在组件中）

  getRowClass = params => {
    return params.data === this.maximum ? 'red' : null;
  };

.css喜欢

.red{
  background-color:red!important;
  color:white!important;
}

.red .ag-input-field-input.ag-text-field-input{
  color:#181d1f!important 
}

现在您需要在调用函数 getGreaterElement 时考虑在内

  //in the ngOnInit
  ngOnInit() {
    this.getGreaterElement();
  }

  //when stop edit the cell "price"
  cellEditingStopped(event: any) {
    if (event.column.colId == 'price') this.getGreaterElement();
  }

  //this is a function to add a row
  addRow() {
    const index = this.rowData.length;
    this.rowData.push({ make: '', model: '', price: 0 });
    this.agGrid.api.applyTransaction({
      add: [this.rowData[index]]
    });
    this.agGrid.api.startEditingCell({
      rowIndex: index,
      colKey: 'make'
    });
  }

还有.html

<button (click)="addRow()">add</button>
<ag-grid-angular  #agGrid
    style="width: 500px; height: 200px;" 
    class="ag-theme-alpine"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [getRowClass]="getRowClass"
    (cellEditingStopped)="cellEditingStopped($event)"
    >
</ag-grid-angular>

您可以在this stackblitz

中看到

Ag-grid中的最高行号

Highest row number in Ag-grid

ag-grid

angular