Ignite UI for jQueryグリッドでソート、ページング、フィルタリング

プロジェクトのセット アップ

こちらをクリックするとレッスンに必要なプロジェクトをダウンロードできます。(こちらからは完成版をダウンロードできます。)

ダウンロードを終えた後、プロジェクトのフォルダーに移動し、下記のコマンドを実行します。

• npm install
• npm start

npm installコマンドを実行することで全ての依存する項目がインストールされます。npm startコマンドを実行することで Angularアプリケーションが実行されます。プロジェクトのセットアップが正しく行われている場合、下記のイメージのようなアプリケーションが実行されます

下部にスクロールするとグリッドが表示されます。子のグリッドに対して設定を行います。

手順 1: ソートの有効化

グリッドにおいて "Sorting" を設定することでソートを有効化できます。Ignite UI for jQueryグリッドはローカル、およびリモート ソートを利用できます。

ローカルの並べ替えを有効にするには、次のプロパティを持つオブジェクトを作成し、Grid の features プロパティに追加します。

• name : "Sorting"
• type : "local"

grid.component.tsを開きgetData()関数の直後に下記のgetGridFeatures()関数を定義します。

getGridFeatures()
{
  return [
  {
    name: "Sorting",
    type: "local"
  }
  ];
}

次に、グリッドオプションに並べ替え機能を追加します。this.gridOptionsでは、featureと呼ばれる新しいプロパティを追加し、その値を this. getGridFeatures()に設定します。grid.component.tsのngOnInit()関数を下記のように変更します。

ngOnInit() {
  this.stocks = this.getData();
  this.gridId = "grid1"
  this.gridOptions = {
    dataSource: this.stocks,
    autoGenerateColumns: true,
    features: this.getGridFeatures()
  }
}

アプリケーションを実行し、グリッドが表示されていることを確認します。

いずれかの列をクリックすると、上記の画像に示されているように、グリッドがその特定の列に対してソートされていることがわかります。さらに、並べ替えられた列ヘッダーには並べ替えインジケーターが適用されているおり、ソート可能な列はグリッド内の残りの列から視覚的に区別されます。Ignite UI for jQueryは複数列のソートについてもサポートしています。

ローカルのソート設定が完了しました。Ignite UI for jQueryはリモートでのソート機能もサポートしています。詳細についてはヘルプをご覧ください。

手順 2: ページングの有効化

グリッドにおいて"Paging"を設定することでページングを有効化できます。Ignite UI for jQueryグリッドはローカル、およびリモート ページングを利用できます。

ローカルのページングを有効にするには、次のプロパティを持つオブジェクトを作成し、Grid のfeaturesプロパティに追加します。

• name : "Paging"
• type : "local"
• pageSize : 5

更にドロップダウンの表示、非表示、あるいはページング ボタンの表示、非表示を設定できます。コードは下記の通りとなります。

{
  name: "Paging",
  type: "local",
  pageSize: 5
}

features オブジェクト配列に上記のオブジェクトを追加します。grid.component.tsを開き、 getGridFeatures()関数をページングとソートの両方の機能設定を返すように変更します。ページング機能を追加した後の getGridFeatures()関数は以下のようになります。

getGridFeatures() {
  return [
  {
    name: "Sorting",
    type: "local"
  },
  {
    name: "Paging",
    type: "local",
    pageSize: 5
  }
  ];
}

アプリケーションを実行し、下にスクロールするとページングが有効化されたグリッドを確認できます。

Ignite UI for jQueryはリモートでのページング機能もサポートしています。詳細についてはヘルプをご覧ください。

手順 3: フィルタリングの有効化

グリッドにおいて"Filtering"を設定することでフィルタリングを有効化できます。

フィルタリングを有効にするには、次のプロパティを持つオブジェクトを作成し、Gridの featuresプロパティに追加します。

• name : "Filtering"
• allowFiltering : true
• caseSensitive: falseまたはtrue

下記のような設定となります。

{
  name: "Filtering",
  allowFiltering: true,
  caseSensitive: false
}

features オブジェクト配列に上記のオブジェクトを追加します。grid.component.tsを開き、 getGridFeatures()関数をページング、ソート、フィルタリングの各機能設定を返すように変更します。getGridFeatures()関数は以下のようになります。

getGridFeatures() {
  return [
  {
    name: "Sorting",
    type: "local"
  },
  {
    name: "Paging",
    type: "local",
    pageSize: 5
  },
  {
    name: "Filtering",
    allowFiltering: true,
    caseSensitive: false
  }
  ];
}

アプリケーションを実行し、下にスクロールするとフィルタリングが有効化されたグリッドを確認できます

これでフィルタリング、ページング、ソートが設定されたグリッドが完成しました。