React Grid のリモート データ操作
デフォルトで、IgrGrid は独自のロジックを使用してデータ操作を実行します。
これらのタスクをリモートで実行し、IgrGrid によって公開される特定の入力とイベントを利用することで、結果として得られたデータを IgrGrid にフィードできます。
無限スクロール
エンドポイントからデータを分割して取得するシナリオの一般的な設計は、無限スクロールです。データ グリッドの場合、エンドユーザーが一番下までスクロールするたびに追加のデータが読み込まれ、表示されるデータが継続的に増えていくのが特徴です。次の段落では、使用可能な API を使用して IgrGrid で無限スクロールを簡単に実現する方法について説明します。
無限スクロールを実装するには、データをチャンク単位で取得する必要があります。既に取得したデータはローカルに保存し、チャンクの長さといくつのチャンクがあるかを判断する必要があります。また、グリッドで最後に表示されているデータ行のインデックスを追跡しておく必要があります。これにより、IgrForOfState.chunkSize と IgrForOfState.startIndex プロパティを使用して、ユーザーが上にスクロールして既に取得済みのデータを表示する必要があるか、下にスクロールしてエンドポイントからさらにデータを取得する必要があるかを判断できます。
最初に、データの最初のチャンクを取得します。IgrGrid.totalItemCount プロパティを設定することは、グリッドがスクロールバーのサイズを正しく設定できるようにするために重要です。
さらに、IgrIgrGrid.dataPreLoad 出力にサブスクライブする必要があります。これにより、グリッドが現在読み込まれているチャンクとは異なるチャンクを表示しようとする際に必要なデータを提供できます。イベント ハンドラーでは、新しいデータを取得するか、既にローカルにキャッシュされているデータを返すかを判断する必要があります。
無限スクロールのデモ
リモート ページング
ページング機能はリモート データで処理できます。これを説明するために、まずデータの取得を担当するサービスを宣言しましょう。ページ数を計算するには、すべてのデータ項目数が必要になるため、このロジックをサービスに追加します。
const CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
export class RemoteService {
public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
.then((result) => result.json());
}
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}`;
}
}
サービスを宣言した後、IgrGrid の構築とデータのサブスクリプションを担当するコンポーネントを作成する必要があります。
<IgrGrid
ref={grid}
data={data}
pagingMode="remote"
primaryKey="customerId"
height="600px"
isLoading={isLoading}
>
<IgrPaginator
perPage={perPage}
ref={paginator}
onPageChange={onPageNumberChange}
onPerPageChange={onPageSizeChange}>
</IgrPaginator>
<IgrColumn field="customerId" hidden={true}></IgrColumn>
<IgrColumn field="companyName" header="Company Name"></IgrColumn>
<IgrColumn field="contactName" header="Contact Name"></IgrColumn>
<IgrColumn field="contactTitle" header="Contact Title"></IgrColumn>
<IgrColumn field="address.country" header="Country"></IgrColumn>
<IgrColumn field="address.phone" header="Phone"></IgrColumn>
</IgrGrid>次に、状態を設定します。
const grid = useRef<IgrGrid>(null);
const paginator = useRef<IgrPaginator>(null);
const [data, setData] = useState([]);
const [page, setPage] = useState(0);
const [perPage, setPerPage] = useState(15);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
loadGridData(page, perPage);
}, [page, perPage]);最後に、データを読み込むメソッドを設定します。
function loadGridData(pageIndex?: number, pageSize?: number) {
// Set loading state
setIsLoading(true);
// Fetch data
RemoteService.getDataWithPaging(pageIndex, pageSize)
.then((response: CustomersWithPageResponseModel) => {
setData(response.items);
// Stop loading when data is retrieved
setIsLoading(false);
paginator.current.totalRecords = response.totalRecordsCount;
})
.catch((error) => {
console.error(error.message);
setData([]);
// Stop loading even if error occurs. Prevents endless loading
setIsLoading(false);
})
}詳細については、以下の完全なサンプルを確認してください。
グリッド リモート ページングのデモ
最後に、RowIsland の動作を設定します。
既知の問題と制限
グリッドに IgrGrid.primaryKey が設定されておらず、リモート データのシナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロールによってリモート サーバーへの要求がトリガーされ、グリッドに表示するデータを取得する場合)、データ要求が完了すると、行は次の状態を失います。
- 行の選択
- 行の展開/折りたたみ
- 行の編集
- 行のピン留め
API リファレンス
IgrGrid
IgrPaginator
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。