製品版のみの機能

グリッド - 仮想化 (固定)

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。

このサンプルでは、jQuery グリッド コントロールの HTML 仮想化機能を紹介します。サイズの大きいレコードの表示に仮想化を推奨します。仮想グリッドは、数千のレコード データ ソースを処理する場合もエンド ユーザーに高いパフォーマンスを提供できます。仮想スクロールおよびページングを無効にした場合も、スムーズな操作が可能です。このサンプルは、クライアント側に一度に読み込まれた 501 JSON レコードがありますが、DOM 要素すべてが HTML で明示的に描画されたグリッドとパフォーマンスに違いはありません。仮想化を実装するには、データを更新するグリッドで仮想 DOM セクションをサポートします。つまり、DOM 要素がグリッドで再利用される代わりに、データセット全体の HTML 要素が明示的に作成されます。依存の DOM 要素でデータを更新すると、ページングまたは仮想スクロールを使用しないデータの大量を読み込むシナリオでは、パフォーマンスを向上します。 仮想化はグリッドの Virtualization プロパティで設定できます。仮想化設定にブール値または数値を使用することも可能です。数値を提供することにより、データ ソースを読み込む行数がこの値を超過した場合に、仮想化が自動的に有効になるように設定することが可能です。更に、水平 (行) および垂直 (列) の仮想化をそれぞれ設定することが可能です。垂直の仮想化は RowVirtualization を true に設定し、水平の仮想化は ColumnVirtualization を true に設定することにより有効にできます。水平または垂直どちらかの仮想化のみを有効にしたい場合、Virtualization は false に設定する必要があります。垂直の仮想化では、列の平均の高さプロパティに注意してください。デフォルト値は 25 ピクセルですが、幅の狭いグリッドの場合にはプロパティを変更する必要があります。ただし、セル テキストが長いため複数行になり、行の高さに影響します。

コード ビュー

クリップボードへコピー