このトピックでは、igGrid のオンデマンドによる行追加機能の概要について説明します。
以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。
この機能は、ユーザーのグリッドでの操作中に、ページ DOM に対するデータ レコードのプログレッシブ ロードを提供しますこれは OneWay の順方向の操作で、各レコードが一番下のグリッドに追加されます。このエクスペリエンス パターンは、最新のレコードが最初に (一番上に) 描画され、ユーザーが必要とするときに残りのデータをロードする順序付けされたデータセットに最適です。Automatic と Button の 2 つのモードで動作します。
Automatic モードの場合、グリッドをスクロール ダウンしてロードされたコンテンツの一番下に到達すると、データが暗示的にロードされます。
Button モードの場合、グリッドの下のボタンをクリックまたはタップすると、追加の行がロードされます。
機能は $.ig.DataSource のページング機能の一番上に構築されるため、$.ig.DataSource でサポートされるすべての範囲のデータ ソースをサポートします。しかし、この機能はページング機能自体と互換性がありません。統合シナリオのサポートについては、｢機能マトリックス (igGrid)｣のトピックを参照してください。
注: この機能は、これまでロード オン デマンドと呼ばれていました。この名称は、igHierarchicalGrid のロード オン デマンド機能を参照する一部の顧客を混乱させる原因でした。混乱を解消するために、igCombo、igHierarchicalGrid、igTree などの他のコントロールのロード オン デマンド機能と区別し、名称が｢オンデマンドによる行追加」に変更されています。移行の指示については、CTP 移行ガイド のセクションを参照してください。
Infragistics Loader を使用せずにオン デマンドによる行追加機能を使用するには、以下の各リソースを参照する必要があります。
CSS ファイル
JavaScript ファイル
以下のコードでは、新しいデータが要求された時に一度に 4 つのレコードをロードするオン デマンドによる行追加機能を使用し、igGrid を初期化します。
JavaScript の場合:
$(function () {
var products = [
{ "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
{ "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
{ "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
{ "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
{ "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
{ "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
{ "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
{ "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
{ "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
];
$("#grid").igGrid({
dataSource: products,
features: [
{
name: "AppendRowsOnDemand",
chunkSize: 4
}
]
});
});
オン デマンドによる行追加機能は、$.ig.DataSource から要求されたレコードが DOM にロードされた場合に、グリッド コンテンツを再描画しません。ただし、他の機能と組合せた場合に、他の機能の要求によりグリッド コンテンツが再描画される場合があります。たとえば Sorting 機能は、現在の部分的なインデックスを保持したまま、DOM を再描画します。この場合、DOM で描画されるレコードの量によりパフォーマンスに影響があります。
Sorting や Filtering などの機能をローカルで実行するように設定され、オン デマンドによる行追加をリモート データ ソースで設定している時に考慮される他のシナリオはパフォーマンスの問題になります。並べ替えやフィルタリングの結果を最新の状態に維持するには、リモート サーバーから新しいデータを受け取るたびに、追加の並べ替えまたはフィルタリング操作を内部で実行しなければなりません。
前述したように、この機能の名称は、他の機能との混同を避けるために「ロード オン デマンド｣から｢オンデマンドによる行追加｣に変更されました。Ignite UI for jQuery の以前のバージョンからアップグレードする場合、以下の情報を知っておく必要があります。
infragistics.ui.grid.loadondemand.js」から「infragistics.ui.grid.appendrowsondemand.js」に変更されています。このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igGrid オンデマンドで行の追加機能は、グリッドにデータを追加する機能を提供します。Automatic と Button の 2 つのモードがあります。上のグリッドは Automatic モードを使用します。グリッドの下へスクロールすると、グリッドに新しいデータが追加されます。下のグリッドは Button モードを使用します。グリッドの下へスクロールし、「その他のデータを読み込む」ボタンを押すと、新しいデータを追加します。
オンラインで表示: GitHub