Ignite UIグリッドを使用しアプリケーションを素早く構築

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

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

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

• npm install
• npm start

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

手順1: コンポーネントのインポートと宣言

Ignite UI for jQuery Angular ラッパーを使用する場合、モジュールへのインポートと宣言が必要になります。例えばigGridコンポーネントをAngularアプリケーションで利用する場合は、アプリケーション モジュールで IgGridComponentをインポートし、宣言します。

このプロジェクトのFinance Appフォルダー、appフォルダーに移動します。app.module.tsファイルを開き、既に存在しているインポートの記述の後に、下記のコードを追加します。 

import{IgGridComponent} from 'igniteui-angular2';
import {GridComponent} from './grid.component';

インポート後、アプリケーション モジュールで宣言をする必要があります。IgGridComponent とGridComponentをAppModuleの宣言配列に追加します。app.module.tsの@NgModuleデコレーターを下記のように変更します。

@NgModule({
imports: [BrowserModule,HttpModule],
declarations: [AppComponent,
              IgZoombarComponent,
              IgDataChartComponent,
              PriceChartComponent,
              InfoComponent,
              IndicatorChartComponent,
              VolumeChartComponent,
              IgGridComponent, GridComponent],
              providers: [AppService],
              bootstrap: [AppComponent]
})
export class AppModule { }

これでigGridComponentとGridComponentがAppModuleモジュールの宣言配列に追加されました。同様の作業をこの後のチュートリアルでも行います。

手順2: データ ソースの作成

グリッドにバインドするデータは ローカル、あるいはRESTサービスで提供されるJavaScript 配列、JSON配列となります。

複数のコンポーネントでデータ関数を使用できるように、Angularサービスでデータを返す関数を作成するのが理想的です。ただし、このレッスンでは、GridComponentクラスにgetdataという関数が既に存在しています。この関数は、JSONオブジェクト配列を返します

appフォルダの grid.component.tsファイルを開き、getData()関数を確認します。以降のレッスンでは、RESTサービスのデータを使用するグリッドを作成する方法について説明します。

手順3: データの取得

getData () 関数から返されるデータを使用するには、Angularの ngOnInit () ライフ サイクル フック内で関数を呼び出し、返された値を GridComponentプロパティに割り当てます。

詳細については Lifecycle Hooks をご覧ください。

app フォルダー内の grid.component.tsファイルを開き、ngOnInit() 関数を下記のように変更します。

ngOnInit(){
  this.stocks = this.getData();
}

手順4:グリッドの作成

Ignite UI for jQueryグリッド コンポーネントは他のコンポーネントと同様に使用することができます。grid.component.htmlを開き、下記のように変更します。

<ig-grid widgetId="grid1" [dataSource]="stocks" [autoGenerateColumns]="true">

手順5: アプリケーションで使用

GridComponent をアプリケーションで使用するため、app.component.html ファイルを開き、下記のコードをマークアップの最後に追加します。

<grid></grid>

アプリケーションを実行し、ページ下部にスクロールすることでグリッドが表示されていることを確認できます。

手順 6: グリッドの列を定義

手順4 では、autoGenerateColumnsプロパティをtrueに設定してグリッドを作成しました。この場合、グリッドの列を構成する必要はなく、自動的に生成されます。

ただし、多くの場合、列を手動で構成する必要があります。コンポーネント クラスでグリッドのページング、並べ替え、フィルター処理などの列およびその他の機能を構成できます。

列を構成するには、appのgrid.component.tsファイルを開きngOnInit()関数を更新します。

ngOnInit() {
  this.stocks = this.getData();
  this.gridId = "Grid1";
  this.gridOptions = {
    dataSource: this.stocks,
    autoGenerateColumns: false,
    columns: [
        { headerText: "CLOSE", key: "Close", dataType: "number" },
        { headerText: "DATE", key: "Date", dataType: "string" },
        { headerText: "HIGH", key: "High", dataType: "number" },
        { headerText: "LOW", key: "Low", dataType: "number" },
        { headerText: "OPEN", key: "Open", dataType: "number" },
        { headerText: "VOLUME", key: "Volume", dataType: "number" }
    ]
  }
}

手順 7: 定義された列をグリッドで変更

Ignite UI for jQuery AngularグリッドのオプションとwidgetIdプロパティは双方向のデータバインディングに対して有効になっているため、ソース内の変更はすべてグリッドに反映されます。オプションとwidgetidプロパティを設定するには、grid.component.htmlを開き、下記のように変更します。

<ig-grid [(options)]= "gridOptions" [(widgetId)]="gridId">

再度アプリケーションを実行し、グリッドを表示させるとグリッドの列ヘッダが定義したように変更されていることを確認できます。