ag-grid-react - Ag-grid 反应固定的行组和行号

Question

我在这里创建了 ag-grid 行分组表 https://plnkr.co/edit/wT6gCxX2jTqiDhlo。

'use strict';

import React, { Component } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise';

class GridExample extends Component {
  constructor(props) {
    super(props);

this.state = {
  columnDefs: [
    {
      headerName: 'Athlete',
      field: 'athlete',
      width: 200,
      enableRowGroup: true,
    },
    {
      headerName: 'ID',
      field: 'id',
      width: 200,
      valueGetter: idgen,
    },
    {
      headerName: 'Gold',
      field: 'gold',
      width: 100,
    },
    {
      headerName: 'Silver',
      field: 'silver',
      width: 100,
    },
    {
      headerName: 'Bronze',
      field: 'bronze',
      width: 100,
    },
    {
      headerName: 'Total',
      field: 'total',
      width: 100,
    },
    {
      headerName: 'Age',
      field: 'age',
      width: 90,
    },
    {
      headerName: 'Country',
      field: 'country',
      width: 120,
      rowGroup: true,
      hide: false,
      valueGetter: countryValueGetter,
      keyCreator: countryKeyCreator,
    },
    {
      headerName: 'Year',
      field: 'year',
      width: 90,
      enableRowGroup: true,
    },
    {
      headerName: 'Date',
      field: 'date',
      width: 110,
    },
    {
      headerName: 'Sport',
      field: 'sport',
      width: 110,
    },
  ],
  rowData: null,
};

}

onGridReady = (params) => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
const httpRequest = new XMLHttpRequest();
const updateData = (data) => {
  this.setState({ rowData: data });
};

httpRequest.open(
  'GET',
  'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json'
);
httpRequest.send();
httpRequest.onreadystatechange = () => {
  if (httpRequest.readyState === 4 && httpRequest.status === 200) {
    updateData(JSON.parse(httpRequest.responseText));
  }
};

};

render() {
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <div
          id="myGrid"
          style={{
            height: '100%',
            width: '100%',
          }}
          className="ag-theme-balham"
        >
          <AgGridReact
            columnDefs={this.state.columnDefs}
            rowData={this.state.rowData}
            onGridReady={this.onGridReady}
            rowGroupPanelShow={'always'}
            autoGroupColumnDef={{
              minWidth: 800,
              cellRendererParams: {
                suppressCount: false,
              },
            }}
          />
        </div>
      </div>
    );
  }
}

function countryKeyCreator(params) {
  var countryObject = params.value;
  return countryObject.name;
}
function idgen(params) {
  return params.node.rowIndex + 1;
}
function countryValueGetter(params) {
  var countryName = params.data.country;
  var countryCode = countryName.substring(0, 2).toUpperCase();
  return {
    name: 'Lets go ' + countryName,
    code: countryCode,
  };
}

render(<GridExample />, document.querySelector('#root'));

我试图在没有组名行的行上有行号。我的意思是我不想将行号分配给分组的行，并且行号应该继续通过所有行而不将组名分配给行号。

谢谢

标签： ag-grid-react