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

始めに

Ignite UI for JavaScript/HTML5 and ASP.NET MVC を使用することで、Web アプリケーションを素早く構築しましょう。Ignite UI for JavaScript を使用すると、HTML5、jQuery、Angular、React、または ASP.NET MVC プラットフォームで複雑な業務要件を解決するアプリケーションを構築できます。さらにグリッドのレスポンシブ機能やページング、ソート、仮想化機能を利用できます。

Ignite UI for JavaScript Grid には、フィルタ処理、ページング、ソートなど、多くの機能を有しています。詳細については Ignite UI for JavaScript 製品ページをご覧ください。

このレッスンでは Ignite UI for JavaScript グリッドの重要な機能を設定する方法を学びます。

レッスンの目的

  1. グリッドでソートを有効化
  2. グリッドでフィルタリングを有効化
  3. グリッドでページングを有効化

コントロールの詳細については Ignite UI データ グリッドをご覧ください。

このレッスンを終えると、Angular アプリケーションに追加したグリッドにおいてソート、フィルタリング、ページング機能を利用することができるようになります。

Ignite UI for JavaScript を Angular で使用するための詳細については Ignite UI for JavaScript Angular コンポーネント ページをご覧ください。

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

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

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

  • npm install
  • npm start

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

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

Setting up project with Ignite Grid

手順 1: ソートの有効化

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

ローカルの並べ替えを有効にするには、次のプロパティを持つオブジェクトを作成し、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()
  }
}

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

Step 1: Enable Sorting

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

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

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

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

ローカルのページングを有効にするには、次のプロパティを持つオブジェクトを作成し、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
  }
  ];
}

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

Step 2: Enable Paging

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

手順 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
  }
  ];
}

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

Step 3: Enable Filtering

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

結びに

Ignite UI for JavaScritpt は Web アプリケーションを素早く構築するのに役立ちます。Angular に加え、Ignite UI for JavaScript は、React、AngularJS、jQuery、ASP.NET で使用することができます。このレッスンでは Ignite UI for JavaScript に含まれている Angular アプリケーションに含まれているグリッドの基本的な機能を設定する方法について学習しました。