时间戳

首页 > 解决方案 > 如何使用 ag-grid 显示行序号

ag-grid - 如何使用 ag-grid 显示行序号

问题描述

尝试使用ag-grid库显示行的索引（“序数”）。

通过序号，如果您从上到下计数，我只是指行号（基于从拖放重新排序或已应用的任何排序）。

即根据随附的屏幕截图，我希望在将“Porche”拖到顶部后（参见“之前”），看到 Porche 的 Index=0、Toyota=1 和 Ford=2。但是他们的索引似乎没有在重新排序时重新计算。

重新排序之前/之后

这是我尝试过的（请参阅_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 事件并强制更新索引更好的方法。

标签： ag-grid

解决方案

如果您订阅RowDragEnd事件和调用，则实现（正如我最初发布的那样）有效api.refreshCells()。从性能的角度来看，这可能并不理想，但就我的目的而言，这并不重要。

推荐阅读