How to show row number as the first column?

问题

It's like this (but start from 1):

Please note the number is for the row element of grid instead of row data of the source. So the number shown in the first cell of each rows should indicate the position of the current row (which starts from 1 for the first row) regardless the row data and the sorting criteria.

Update: The result is like this: 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>

The problems in this sample are:

The row number is defined in the data, which is not supported in real case. Maintaining a row is difficult and slow since inserting from the beginning will need to update many rows.
Since the row number is defined in the data, after sorting you won't see the row number is randomized. I still want to see the row number start from 1 from the beginning.

Basically it's easier to be part of the grid feature, and many other grids (not limited to JS grids) support this. I'm wondering if it's easy to do it in with ag-grid.

回答1:

Ag-grid now has a "valueGetter" for cells that takes an expression, so you can just use

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

In order to have it refresh after sorting, you need to call refreshCells:

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

If you are filtering, you would do the same thing on the 'filterChanged' event.

回答2:

One way that we can use is: create a custom component that implements "ICellRendererAngularComp" interface refer to https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-angular-components and implements agInit method like below:

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 {

  }

}

In your view:

{{ rowNumber }}

finally in your list component:

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

来源：https://stackoverflow.com/questions/50477469/how-to-show-row-number-as-the-first-column

标签

ag-grid