Как показать порядковый номер строки с ag-сеткой

Попытка показать индекс ("порядковый номер") строки с помощью библиотеки ag-grid.

Под порядковым номером я просто подразумеваю номер строки, если считать сверху вниз (на основе переупорядочения путем перетаскивания или любой примененной сортировки).

то есть, согласно приложенному скриншоту, я хотел бы, чтобы Porche имел Index = 0, Toyota = 1 и Ford = 2 после перетаскивания «Porche» наверх (см. «до»). Но индекс, похоже, не пересчитывается при изменении порядка.

до/после изменения порядка

Вот что я пробовал (см. _getIndexValue):

import { Grid, GridOptions, ColDef } from "ag-grid/main";
import { ValueGetterParams } from "ag-grid/dist/lib/entities/colDef";

// for ag-grid-enterprise users only
import 'ag-grid-enterprise/main';

import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/ag-theme-balham.css";

class SimpleGrid {
    _getIdValue(args: ValueGetterParams): any {
        return args.node.id;
    }

    _getIndexValue(args: ValueGetterParams): any {
        return args.node.rowIndex;
    }    

    private gridOptions: GridOptions = <GridOptions>{};

    constructor() {
        this.gridOptions = {
            columnDefs: this.createColumnDefs(),
            rowData: this.createRowData(),
            rowDragManaged: true,
        };

        let eGridDiv:HTMLElement = <HTMLElement>document.getElementById('myGrid');
        new Grid(eGridDiv, this.gridOptions);
    }

    // specify the columns
    private createColumnDefs(): ColDef[] {
        return [
            {headerName: "Index", valueGetter: (args) => this._getIndexValue(args), rowDrag: true},            
            {headerName: "ID", valueGetter: (args) => this._getIdValue(args)},
            {headerName: "Make", field: "make"},
            {headerName: "Model", field: "model"},
            {headerName: "Price", field: "price"}
        ];
    }

    // specify the data
    private createRowData() {
        return [
            {make: "Toyota", model: "Celica", price: 35000},
            {make: "Ford", model: "Mondeo", price: 32000},
            {make: "Porsche", model: "Boxter", price: 72000}
        ];
    }
}

window.addEventListener("load", () => {
    new SimpleGrid();
});

Я надеюсь, что есть лучший способ сделать это, чем подписаться на событие dragEnd и принудительно обновить индекс.


person eddiewould    schedule 14.05.2018    source источник


Ответы (1)


Реализация (как я уже писал) работает, если вы подписываетесь на событие RowDragEnd и вызываете api.refreshCells(). Это, вероятно, не идеально с точки зрения производительности, но для моих целей это не имеет значения.

person eddiewould    schedule 14.05.2018
comment
Благодарю вас! Работал нормально :D - person Rodrigo De Oliveira Murta; 26.07.2018