Ag-grid 中的最高行数答案

【问题标题】：Highest row number in Ag-gridAg-grid 中的最高行数
【发布时间】：2021-10-29 08:13:11
【问题描述】：

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

How to provide a background color for an entire row in ag grid based on a certain value in a column?

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

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

这样的行数据

  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
  }

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

  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看到

【讨论】：

【解决方案2】：

如果您正在寻找编号的计数。行或最后一行的行节点对象，您可以通过网格 API 对象获取它。这是指南：https://www.ag-grid.com/javascript-data-grid/grid-api/

希望你已经通过(gridReady)

存储了grid API对象

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

【讨论】：

感谢您的回复。