ページング (igGrid)

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 概要
• データ書式
• ページングを有効にする
• サンプル
• ASP.NET MVC コード
• リモート ページング
• API の使用
• クライアント側イベント
• ページング UI 要素の位置
• 既知の問題と制限
• ページング プロパティ
• ページング CSS クラス
• キーボード操作
• 関連コンテンツ

概要

Ignite UI for jQuery™ グリッド、つまり igGrid のページング機能では、オリジナル データ ソースから事前に定義された数のレコードだけフェッチすることで、パフォーマンスが向上できるよう、ページ中のデータを分割できます。

図 1: 一般的なグリッド ページング UI

図 2: ドロップダウン セレクターを使用したページング

注: グリッドのページング機能は jQuery UI ウィジェットとして実装されているため、一般的な jQuery UI ウィジェットの標準ライフサイクルに従います。

ページングの設定は、ローカルまたはリモートで実行できます。ローカルの場合、ページング操作はクライアントで行われます。つまり、データはすべてブラウザー上にあるものの、pageSize プロパティで指定された数のレコードだけがユーザーに描画されます。

「リモート」シナリオの場合、すべてのページ変更について、グリッドは pageIndex や pageSize など要求に必要なすべてのパラメーターを自動的に計算し、付加することで、グリッドで指定された dataSource への要求を開始します。

ページング機能では、ユーザーは UI を通して pageSize を変更できます。この UI はグリッド列ヘッダーの上にあるグリッド ヘッダーで、またはページャー領域の一部として利用できます。

注: ページング UI のすべてのパーツは、キーボード上の TAB キーと Shift-TAB キーでナビゲートできます。

データ書式

ページング機能は、あえて設定せずに oData サービスへのバインディングをサポートしています。oData へバインドする場合、必須パラメーターはサービス要求で自動的に決定され、設定されます。グリッドの dataSource オプションをサービス URL にポイントするだけです。

Ignite UI for MVC Grid からページングを使用する場合、ページング URL パラメーターを LINQ 式に変換することで、ページング関連のすべてのデータのバインディング ロジックが自動的に行われます。

pageCountLimit プロパティの値によって、UI はページ リンクからページ インデックス ドロップダウンの描画へ自動的に切り替わります。

注: グリッドのページング機能で使用されるドロップダウンとエディターは、igEditor コントロールのインスタンスです。

ページングを有効にする

ページングを有効にするには、まず必要な JavaScript および CSS の依存関係を組み込む必要があります。必要な依存関係を組み込む最も簡単な方法は、リスト 1 に示すように､スクリプトとスタイルを組み合わせて縮小したものを使用することです。

• リスト 1: グリッド ページングに必要なスクリプトと CSS ファイル

  HTML の場合:

    <link type="text/css" href="infragistics.theme.css" rel="stylesheet" />
    <link type="text/css" href="infragistics.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="infragistics.core.js"></script><script type="text/javascript" src="infragistics.lob.js"></script>
  

  ページングに最小限必要な Ignite UI for jQuery™ スクリプトのみを組み込む場合は、リスト 2 に示すようにスクリプトを参照するだけで組み込むことができます。

• リスト 2: グリッド ページングを有効にするのに必要な最小限のスクリプトとスタイル

  HTML の場合:

    <script type="text/javascript" src="infragistics.util.js"></script>
    <script type="text/javascript" src="infragistics.util.jquery.js"></script>
    <script type="text/javascript" src="infragistics.dataSource.js"></script>
    <script type="text/javascript" src="infragistics.ui.shared.js"></script>
    <script type="text/javascript" src="infragistics.ui.popover.js"></script>
    <script type="text/javascript" src="infragistics.ui.editors.js"></script>
    <script type="text/javascript" src="infragistics.ui.grid.framework.js"></script>
    <script type="text/javascript" src="infragistics.ui.grid.paging.js"></script>
  

• リスト 3: ページングが有効になっている igGrid コントロールの初期化

  JavaScript の場合:

    $("#grid1").igGrid({
        columns: [
            { headerText: "Product ID", key: "ProductID", dataType: "number" },
            { headerText: "Product Name", key: "Name", dataType: "string" },
            { headerText: "ProductNumber", key: "ProductNumber", dataType: "string" }
        ],
        dataSource: adventureWorks,
        responseDataKey: 'Records',
        features: [
            {
                name : 'Paging',
                type: "local",
                pageSize : 7
            }
        ]
    });
  

• リスト 4: グリッドのインスタンス化に使用する HTML コンテナー

  HTML の場合:

    <table id="grid1"></table>
  

• リスト 5: JSON データの例

  応答:

    var adventureWorks = { "Records" : [ 
          { "Name" : "Adjustable Race",
            "ProductID" : 1,
            "ProductNumber" : "AR-5381"
          },
          { "Name" : "Bearing Ball",
            "ProductID" : 2,
            "ProductNumber" : "BA-8327"
          }
          /*the full JSON output is omitted*/
        ]
    }
  

サンプル

ASP.NET MVC コード

リスト 6 は、ASP.NET MVC ビューでページングが有効な Ignite UI for MVC Grid を初期化する方法を紹介します。

• リスト 6: ASP.NET MVC のページングが有効になっているグリッドの初期化

  ASPX の場合:

    <%= Html.Infragistics().Grid(Model).ID("grid1").Columns(column =>
       {
          column.For(x => x.ProductID).HeaderText("Product ID").Width("100px");
          column.For(x => x.Name).HeaderText("Product Name").Width("200px");
          column.For(x => x.ProductNumber).HeaderText("Product Number").Width("200px");
       }).
       Features(features => 
       {
          features.Paging().PageSize(20);
       }).
       Height("500").
       DataSourceUrl(Url.Action("PagingGetData")).
       DataBind().
       Render() %>
  

  C# の場合:

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [GridDataSourceAction]
        public ActionResult PagingGetData()
        {
            return View(this.GetCustomers().AsQueryable());
        }
        private List<Product> GetProducts()
        {
            List<Product> products = new List<Product>()
            {
                new Product() { ProductID = 1, Name = "Adjustable Race", ProductNumber = "AR-5381" },
                new Product() { ProductID = 1, Name = "Bearing Ball", ProductNumber = "BA-8327" }
            };
            return products;
        }
    }
  

リモート ページング

Ignite UI for MVC を使用する場合、自動的にリモート ページングを処理します。ActionResult (リスト 6) を返す GridDataSourceActionAttribute 属性を含む操作メソッドを作成する必要があります。操作メソッドはデータを IQueryable のインスタンスとして渡します。IActionFilter インターフェイスを実装する GridDataSourceActionAttribute クラスは、要求パラメーターによってデータを変換して JsonResult として返します。

カスタム リモート サービスを実装している (ASP.NET または PHP などの) 場合、ページャーを正しく初期化して描画するには、サービスで responseDataKey (グリッド オプション) および recordCountKey (ページング オプション) の両方を指定する必要があります。recordCountKey メンバーは、バックエンドに存在する合計レコード数を Paging ウィジェットに通知します。responseDataKey は、結果データが含まれる応答のプロパティを指定します。

したがって、リモート ページングを使用する場合、グリッドは次のように正しい要求パラメーターを自動的に生成します。

http://<server>/grid/PagingGetData?page=2&pageSize=25

注: ページング オプションの pageSizeUrlKey / pageIndexUrlKey をそれぞれ設定して、キー名を変更できます。

API の使用

次のように、ページ インデックスまたはページ サイズをプログラムで変更できます。

• リスト 7: ページ サイズの取得

  JavaScript の場合:

    $(“#grid1”).igGridPaging("option", "pageSize");
  

• リスト 8: 現在のページ インデックスを取得する

  JavaScript の場合:

    $(“#grid1”).igGridPaging("option", "currentPageIndex");
  

• リスト 9: 3番目のページがロードされるよう現在のページ インデックスを変更する

  JavaScript の場合:

    $(“#grid1”).igGridPaging(“pageIndex”, 2);
  

visiblePageCount オプションを変更すると、グリッドで簡単に「クイック ページ」効果が得られます。つまり、グリッドは visiblePageCount で定義されたページ リンクの数だけしか描画しないことを意味します。したがって、visiblePageCount が 5 で、ページ 3 にいた場合、ページ リンク「1」と「2」は左側に描画され、ページ リンク「4」と「5」は右側に描画されます。

注: 実際のページ カウントが pageCountLimit オプションの値を超えている場合、ページング ウィジェットは現在のページを選択するため、ドロップダウンを描画し続けます。

また、ページング オプションの pageSizeList (配列) オプションを設定して、ページ サイズ リストをカスタマイズすることもできます。配列の値はそれぞれ、ページ インデックス順に追加されたページのサイズを指定します。次に例を示します。

pageSizeList: [10, 44, 123, 5]

上記の配列では、ページ 1 は 10 行に等しく、ページ 2 は 44 などページのサイズを指定します。

クライアント側イベント

初期化中またはウィジェットがインスタンス化された後に、クライアント側イベントにバインドできます。まず、グリッドの既存のインスタンスにアプローチできます。

• リスト 10: クライアントにおけるイベント ハンドラーのページ インデックスされた変更イベントへの関連付け

  JavaScript の場合:

    $("#grid1").bind("iggridpagingpageindexchanged", handler);
  

注: ページングがまだインスタンス化されていない場合、「バインド」ではなく「ライブ」を使用します。

2 番目のアプローチでは、ページング機能を初期化する場合にオプションとしてイベント名を指定して、初期化中にイベント ハンドラーを定義できます。

注: このバインド構文では、バインドまたはライブ jQuery 関数の付加と違い、大文字と小文字を区別します。

• リスト 11: 初期化中のイベント ハンドラーのページ インデックス変更への関連付け

  JavaScript の場合:

    {
        Name: “Paging”,
        pageIndexChanging: handler,
        < other paging options>
    }
  

「ハンドラー」関数はリスト 12 のコードに似ています。

• リスト 12: ページング機能で呼び出された空のイベント ハンドラー

  JavaScript の場合:

    function handler(event, args) {
  
    }
  

注: args はイベントごとにそれぞれ、以下に詳細に説明します。

クライアント側イベント

表 1: クライアント側イベントのリスト

ページング UI 要素の位置

図 1: ページング UI 要素の位置

既知の問題と制限

• 選択されたセルと行は、ページ間で保持されません。

ページング プロパティ

表 2 に、ページング機能に使用できる初期化オプションのリストおよび説明を詳しく記載しています。

注: 括弧内の値は、デフォルト オプション値を表します。

表 2: 使用可能なグリッド ページング初期化オプション

ページング CSS クラス

グリッド ページング機能を使用する場合、ある指定の UI 要素のページャーの外観をカスタマイズする場合があります。表 3 は、グリッド ページャー UI に適用された使用可能なクラスの詳細を示しています。

表 3: ページング ウィジェットに使用できるクラス

キーボード操作

以下のキーボード操作が可能です。

グリッドにフォーカスがある場合:

• TAB: ページャー UI のフォーカス可能な要素間でフォーカスを移動: ボタン、ページリンク、およびドロップダウン。 フォーカスがページ サイズ ドロップダウンにある場合、利用可能なページ サイズのリストが表示され、以下の操作が可能です。
• UP/DOWN: 利用可能なリスト項目間を移動。
• SPACE/ENTER: 現在強調表示される項目を選択。新しい項目が選択されると、新しいページサイズがグリッドに適用され、ページ サイズ ドロップダウンが閉じます。

ページャー ボタンにフォーカスがある場合:

• ENTER/SPACE: [アクティブ ページャー] ボタンを選択し、それに基づいて現在のページ インデックスが変更されます。 フォーカスがページ インデックス ドロップダウンにある場合、利用可能なページ インデックスが表示され、ページ サイズ ドロップダウンと同じ操作が適用されます。

関連コンテンツ

トピック

• igGrid の概要
• 選択の概要 (igGrid)
• フィルタリング (igGrid)
• 並べ替えの概要 (igGrid)