如何将行号显示为第一列？

Question

就像这样（但从1开始）：

请注意，该数字适用于网格的行元素，而不是源的行数据。因此，无论行数据和排序标准如何，每行第一个单元格中显示的数字应指示当前行的位置（从第一行的1开始）。

更新：结果如下：https://jsfiddle.net/wp6o350z/

<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css">

<div id="myGrid" style="height: 200px;width:500px;" class="ag-theme-balham"></div>

<script type="text/javascript" charset="utf-8">
    // specify the columns
    var columnDefs = [
      {headerName: "#", field: "row", width: 30 },
      {headerName: "Make", field: "make", width: 100 },
      {headerName: "Model", field: "model", width: 100},
      {headerName: "Price", field: "price", width: 100}
    ];

    // specify the data
    var rowData = [
      {row: 1, make: "Toyota", model: "Celica", price: 35000},
      {row: 2, make: "Ford", model: "Mondeo", price: 32000},
      {row: 3, make: "Porsche", model: "Boxter", price: 72000},
      {row: 4, make: "Toyota", model: "Celica", price: 35000},
      {row: 5, make: "Ford", model: "Mondeo", price: 32000},
      {row: 6, make: "Porsche", model: "Boxter", price: 72000},
      {row: 7, make: "Toyota", model: "Celica", price: 35000},
      {row: 8, make: "Ford", model: "Mondeo", price: 32000},
      {row: 9, make: "Porsche", model: "Boxter", price: 72000}
    ];

    // let the grid know which columns and what data to use
    var gridOptions = {
      columnDefs: columnDefs,
      rowData: rowData,

    };

  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

  // create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);

</script>

此示例中的问题是：

1. 行号在数据中定义，实际情况不支持。保持一行是困难和缓慢的，因为从头开始插入将需要更新许多行。
2. 由于行号是在数据中定义的，因此在排序后您将看不到行号是随机的。我仍然希望看到行号从头开始。

基本上，它更容易成为网格功能的一部分，许多其他网格（不限于JS网格）支持这一点。我想知道用ag-grid做它是否容易。

Answer 1

Ag-grid现在为带有表达式的单元格提供了一个“ valueGetter”，因此您只需使用

columnDefs: [
  {
    headerName: "Row",
    valueGetter: "node.rowIndex + 1"
  },
  (other columns)
]

要使其在排序后刷新，您需要调用refreshCells：

onSortChanged(e: AgGridEvent) {
  e.api.refreshCells();
}

如果要过滤，则将对'filterChanged'事件执行相同的操作。

Answer 2

我们可以使用的一种方法是： 创建一个实现“ ICellRendererAngularComp”接口的自定义组件 请参阅https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-angular-components 并实现如下所示的agInit方法：

import { ICellRendererAngularComp } from 'ag-grid-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'app-ag-grid-row-number',
  templateUrl: './ag-grid-row-number.component.html',
  styleUrls: ['./ag-grid-row-number.component.scss']
})
export class AgGridRowNumberComponent implements ICellRendererAngularComp {

  rowNumber: number;
  refresh(params: any): boolean {
    return true;
  }
  agInit(params: import('ag-grid-community').ICellRendererParams): void {
    this.rowNumber = params.rowIndex + 1;
  }
  afterGuiAttached?(params?: import('ag-grid-community').IAfterGuiAttachedParams): void {

  }

}

您认为：

{{ rowNumber }}

最后在您的列表组件中：

public columnDefs = [
    {headerName: 'row number', cellRendererFramework: AgGridRowNumberComponent}, 
... ]