データのページ付け/フィルター/並べ替えのサーバー側リクエストを実装しようとしていますが、ドキュメントが非常に混乱しています。
この例では、無限行モデル( https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination )でこのために.json
ファイルを使用しています。この例では、サーバーから.jsonファイル全体を読み込み、クライアント関数(sortAndFilter()
、sortData()
、filterData()
)を使用して並べ替えとフィルター処理を行います。すべてのデータがサーバーから完全にロードされるため、これはサーバー側ではなく、クライアント側です。このファイルに1Gbのデータがある場合は?
実際のシナリオでは、サーバーからすべてのデータをロードするわけではありません(例では、jsonファイル全体をロードします)。ユーザーが次のページをクリックするたびにサーバーにリクエストを送信し、ページ/フィルターと並べ替えデータのパラメーターを渡し、このフィルター処理/並べ替えられたデータを読み込んでグリッドに表示します。
私が欠けているものは何ですか? Ag-gridはこれを変えますか、それとも私は完全に失われますか?モックサーバーを使った簡単な例は大いに役立ちます。
明確化せずに開閉されたサポートチケット(#2237、#1148 ...)がいくつかあります。誰かがこれを明らかにしてくれることを願っています。
データソースオブジェクトを実現する必要があります。データを取得する方法を指定する必要がある場所。次に、グリッドAPIを使用してこのデータソースオブジェクトを設定します。
app.component.html:
<div style="display:flex; width:100%; height:100%; flex-direction:column; position:absolute;">
<div style="flex-grow:0">
<p>{{ info }}</p>
</div>
<div style="flex-grow:1; height: 1px;">
<ag-grid-angular style="width: 100%; height: 100%" class="ag-theme-balham"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)"
#grid
></ag-grid-angular>
</div>
</div>
app.component.ts
import { Component, HostListener, Input, ViewChild } from '@angular/core';
import { GridOptions, IDatasource, IGetRowsParams, ColDef } from 'ag-grid';
import { AgGridNg2 } from 'ag-grid-angular';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
public columnDefs: any[];
public rowData: any[];
public gridOptions: any;
public info: string;
@ViewChild('grid') grid: AgGridNg2;
constructor() {
this.columnDefs = [
{ headerName: 'One', field: 'one' },
{ headerName: 'Two', field: 'two' },
{ headerName: 'Three', field: 'three' }
];
this.gridOptions = {
rowSelection: 'single',
cacheBlockSize: 100,
maxBlocksInCache: 2,
enableServerSideFilter: false,
enableServerSideSorting: false,
rowModelType: 'infinite',
pagination: true,
paginationAutoPageSize: true
};
}
private getRowData(startRow: number, endRow: number): Observable<any[]> {
//this code I'm included there only for example you need to move it to
//service
let params: HttpParams = new HttpParams()
.append('startRow', `${startRow}`)
.append('endRow', `${endRow}`);
return this.http.get(`${this.actionUrl}/GetAll`, {params: params})
.pipe(
map((res: any) => res.data)
);
}
onGridReady(params: any) {
console.log("onGridReady");
var datasource = {
getRows: (params: IGetRowsParams) => {
this.info = "Getting datasource rows, start: " + params.startRow + ", end: " + params.endRow;
this.getRowData(params.startRow, params.endRow)
.subscribe(data => params.successCallback(data));
}
};
params.api.setDatasource(datasource);
}
}
これは、グリッドのデータソースの大まかな例です。