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イベントをサブスクライブしてインデックスを強制的に更新するよりも、それを行うためのより良い方法があることを望んでいます。
(私はもともと投稿として)実装が動作する場合は、あなたが購読RowDragEnd
イベント&呼び出しapi.refreshCells()
。パフォーマンスの観点からはおそらく理想的ではありませんが、私の目的には関係ありません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加