Web Components Grid のリモート データ操作
デフォルトで、IgcGrid は独自のロジックを使用してデータ操作を実行します。
これらのタスクをリモートで実行し、IgcGrid によって公開される特定の入力とイベントを利用することで、結果として得られたデータを IgcGrid にフィードできます。
無限スクロール
エンドポイントからデータを分割して取得するシナリオの一般的な設計は、無限スクロールです。データ グリッドの場合、エンドユーザーが一番下までスクロールするたびに追加のデータが読み込まれ、表示されるデータが継続的に増えていくのが特徴です。次の段落では、使用可能な API を使用して IgcGrid で無限スクロールを簡単に実現する方法について説明します。
無限スクロールを実装するには、データをチャンク単位で取得する必要があります。既に取得したデータはローカルに保存し、チャンクの長さといくつのチャンクがあるかを判断する必要があります。また、グリッドで最後に表示されているデータ行のインデックスを追跡しておく必要があります。これにより、IgcForOfState.chunkSize と IgcForOfState.startIndex プロパティを使用して、ユーザーが上にスクロールして既に取得済みのデータを表示する必要があるか、下にスクロールしてエンドポイントからさらにデータを取得する必要があるかを判断できます。
最初に、データの最初のチャンクを取得します。IgcGrid.totalItemCount プロパティを設定することは、グリッドがスクロールバーのサイズを正しく設定できるようにするために重要です。
さらに、IgcGrid.dataPreLoad 出力にサブスクライブする必要があります。これにより、グリッドが現在読み込まれているチャンクとは異なるチャンクを表示しようとする際に必要なデータを提供できます。イベント ハンドラーでは、新しいデータを取得するか、既にローカルにキャッシュされているデータを返すかを判断する必要があります。
無限スクロールのデモ
リモート ページング
ページング機能はリモート データで処理できます。これを説明するために、まずデータの取得を担当するサービスを宣言しましょう。ページ数を計算するには、すべてのデータ項目数が必要になるため、このロジックをサービスに追加します。
export class RemotePagingService {
public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
constructor() {}
public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
.then((result) => result.json())
.catch((error) => console.error(error.message));
}
private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
let qS = "";
if (baseUrl) {
qS += `${baseUrl}`;
}
// Add pageIndex and size to the query string if they are defined
if (pageIndex !== undefined) {
qS += `?pageIndex=${pageIndex}`;
if (pageSize !== undefined) {
qS += `&size=${pageSize}`;
}
} else if (pageSize !== undefined) {
qS += `?perPage=${pageSize}`;
}
return `${qS}`;
}
}サービスを宣言した後、IgcGrid の構築とデータのサブスクリプションを担当するコンポーネントを作成する必要があります。
まず、関連するイベントにバインドして、ページを変更したり、ページごとに表示されるレコードの量を変更したりするときに、リモート サービスが正しい量のデータを取得するようにする必要があります。
constructor() {
this.grid = document.getElementById('grid') as IgcGridComponent;
this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
this._bind = () => {
window.addEventListener("load", () => {
this.loadData(this.page,this.perPage);
});
this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
this.perPage = args.detail;
this.loadData(this.page, this.perPage);
}) as EventListener);
this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
this.page = args.detail;
this.loadData(this.page, this.perPage);
}) as EventListener);
}
this._bind();
}また、データを読み込む方法を設定し、それに応じて UI を更新する必要があります。
private loadData(pageIndex?: number, pageSize?: number): void {
this.grid.isLoading = true;
RemotePagingService.getDataWithPaging(pageIndex,pageSize)
.then((response: CustomersWithPageResponseModel) => {
this.totalRecordsCount = response.totalRecordsCount;
this.pager.perPage = pageSize;
this.pager.totalRecords = this.totalRecordsCount;
this.page = response.pageNumber;
this.data = response.items;
this.grid.isLoading = false;
this.updateUI(); // Update the UI after receiving data
})
.catch((error) => {
console.error(error.message);
// Stop loading even if error occurs. Prevents endless loading
this.grid.isLoading = false;
this.updateUI();
})
}
private updateUI(): void {
if (this.grid && this.data) { // Check if grid and data are available
this.grid.data = this.data;
}
}詳細については、以下のデモを確認してください。
グリッド リモート ページングのデモ
既知の問題と制限
グリッドに IgcGrid.primaryKey が設定されておらず、リモート データのシナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロールによってリモート サーバーへの要求がトリガーされ、グリッドに表示するデータを取得する場合)、データ要求が完了すると、行は次の状態を失います。
- 行の選択
- 行の展開/折りたたみ
- 行の編集
- 行のピン留め
API リファレンス
IgcGrid
Paginator
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。