ag-gridを使用して行の序数を表示する方法

eddiewould

ag-gridライブラリを使用して行のインデックス(「序数」)を表示しようとしています。

序数とは、上から下に数える場合の行番号を意味します(ドラッグドロップからの並べ替えまたは適用された並べ替えに基づく)。

つまり、添付のスクリーンショットによると、「ポルシェ」を一番上までドラッグした後、インデックス= 0、トヨタ= 1、フォード= 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イベントをサブスクライブしてインデックスを強制的に更新するよりも、それを行うためのより良い方法があることを望んでいます。

eddiewould

(私はもともと投稿として)実装が動作する場合は、あなたが購読RowDragEndイベント&呼び出しapi.refreshCells()パフォーマンスの観点からはおそらく理想的ではありませんが、私の目的には関係ありません。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular5:ag-gridに非表示の行を表示する

分類Dev

AG-Grid、Angular、TypeScriptを使用して、列のColSpanを動的に設定する方法

分類Dev

ag-gridを正しく使用する

分類Dev

ag-gridのすべての行をクリア/削除する方法

分類Dev

Ag-gridは行数を表示します

分類Dev

ag-grid行にIDを追加する

分類Dev

角度2ag-gridのag-gridの2つの行の間にスペースを追加する方法

分類Dev

(ag-Grid)選択した複数の行に背景色を配置する方法

分類Dev

反応でag-gridを使用する

分類Dev

Ag-Grid:列の順序を保存して再読み込みする方法

分類Dev

ag-gridの特定の行に色を付ける方法は?

分類Dev

Ag-gridで更新された行を取得する方法

分類Dev

ag-gridテーブルのフッターで合計行を有効化または表示する方法

分類Dev

行のAg-GridDOM

分類Dev

列の非表示と表示の機能に基づいて列ヘッダーの問題に直面しているangularJsでag-gridを使用する

分類Dev

Angular 5 + ag-grid-メディアクエリでag-gridを使用する

分類Dev

Angular 6でag-Gridを使用して行全体の更新を実行する場合は、編集された列(データを含む)を取得します

分類Dev

ag-gridの行を追加/削除します

分類Dev

Ag-grid-enterprise with react

分類Dev

Using ag-grid in react

分類Dev

ag-Grid:valueFormatter例外

分類Dev

ag-grid行編集の検証ルールを実装する方法

分類Dev

ag-grid-vue:行のクリックを検出する方法は?

分類Dev

ag-grid:ドラッグドロップを使用してグリッド内の行を並べ替える

分類Dev

ag-gridセルの最大長を設定する方法

分類Dev

角度を使用してag-gridで列ヘッダーをラップする方法

分類Dev

行データに基づいてag-gridの列幅をレスポンシブにする方法は?

分類Dev

Ag GridEnterpriseの機能

分類Dev

同期した2つのag-gridをスクロールする方法は?

Related 関連記事

  1. 1

    Angular5:ag-gridに非表示の行を表示する

  2. 2

    AG-Grid、Angular、TypeScriptを使用して、列のColSpanを動的に設定する方法

  3. 3

    ag-gridを正しく使用する

  4. 4

    ag-gridのすべての行をクリア/削除する方法

  5. 5

    Ag-gridは行数を表示します

  6. 6

    ag-grid行にIDを追加する

  7. 7

    角度2ag-gridのag-gridの2つの行の間にスペースを追加する方法

  8. 8

    (ag-Grid)選択した複数の行に背景色を配置する方法

  9. 9

    反応でag-gridを使用する

  10. 10

    Ag-Grid:列の順序を保存して再読み込みする方法

  11. 11

    ag-gridの特定の行に色を付ける方法は?

  12. 12

    Ag-gridで更新された行を取得する方法

  13. 13

    ag-gridテーブルのフッターで合計行を有効化または表示する方法

  14. 14

    行のAg-GridDOM

  15. 15

    列の非表示と表示の機能に基づいて列ヘッダーの問題に直面しているangularJsでag-gridを使用する

  16. 16

    Angular 5 + ag-grid-メディアクエリでag-gridを使用する

  17. 17

    Angular 6でag-Gridを使用して行全体の更新を実行する場合は、編集された列(データを含む)を取得します

  18. 18

    ag-gridの行を追加/削除します

  19. 19

    Ag-grid-enterprise with react

  20. 20

    Using ag-grid in react

  21. 21

    ag-Grid:valueFormatter例外

  22. 22

    ag-grid行編集の検証ルールを実装する方法

  23. 23

    ag-grid-vue:行のクリックを検出する方法は?

  24. 24

    ag-grid:ドラッグドロップを使用してグリッド内の行を並べ替える

  25. 25

    ag-gridセルの最大長を設定する方法

  26. 26

    角度を使用してag-gridで列ヘッダーをラップする方法

  27. 27

    行データに基づいてag-gridの列幅をレスポンシブにする方法は?

  28. 28

    Ag GridEnterpriseの機能

  29. 29

    同期した2つのag-gridをスクロールする方法は?

ホットタグ

アーカイブ