ある日、いつものように、コーヒーを飲みながら、できるだけ早くシンプルな機能を備えたアプリケーションを作成する必要があるというメッセージをSkypeで受け取ります。 ソートとページネーション、単語、日付などでフィルタリングする機能を備えたテーブルが必要でした。 また、テーブルから選択したアイテムに関する情報を含むページを用意します。
そのようなtkを手に入れて、貴重な時間を無駄にしないように、Ag-Gridと組み合わせて最新のAngularを使用することにしました。
それはすべてかなり標準的なもので、標準のAngularアプリケーションをインストールして作成します：
Angular自体をインストールする
npm install -g @angular/cli
新しいプロジェクトを作成する
ng new my-app
そして、私たちは走ることができます
cd my-appng serve --open
ここでは、新しいものや複雑なものは何もありません。 全体の手順はせいぜい20分で完了し、既に動作するアプリケーションがあります。 私たちは彼に私たちが必要とするものにこだわることができる。
簡単なものから始めます。
ブートストラップ。 なんで？ シンプル、高速、効率的。 私たちが持っているタスクの枠組みでは、それで十分です。 実際、これらはいくつかの入力フィールド、異なる色のいくつかのボタン、そしてそれだけです。 3番目のバージョンをjQueyと組み合わせます。
$ npm install bootstrap@3 jquery
次に、
angle-cli.jsonファイルに移動して追加します。
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
これで、ページ上でBootstrapが正常に機能するようになりました。 そして続けます。
Ag-Gridはこのコンポーネントを使用した経験があるため、このコンポーネントを自分で選択しました。非常に柔軟であり、いずれの場合もタスクに適しています。 完全に使用するために、以下を設定します。
npm install ag-grid-angular npm install ag-grid
次に、app.module.tsに移動して、必要なコンポーネントをインポートします。
import {AgGridModule} from "ag-grid-angular/main";
インストールしたag-gridのインストールは後で必要になります。 ファイルに追加する
imports: [ AgGridModule.withComponents([ LinkComponent ]) ],
AgGridModule.withComponentsに注意を払いたいので、Ag-Gridで作成したコンポーネントを追加して使用できるようになります。 そこにある
LinkComponentは、データをリンクとしてレンダリングするためのコンポーネントです。 後で戻ります。
また、コンポーネント、サービス、ビューモデルのフォルダを作成します。これらには独自のコンポーネント、サービスがあり、すべてを接続します。質問や問題はないはずです。 Ag-Gridに戻りましょう。
Ag-Gridが使用されているコンポーネントで、以下を接続します。
import { GridOptions, IDatasource, IGetRowsParams, ColDef, ColGroupDef, NodeChildDetails, RowNode } from "ag-grid"; import { LinkComponent } from '../example/example';
現時点では、接続されているすべてのグリッドコンポーネントを使用するわけではありませんが、将来的には必要になります。 当然、自由に何かを削除または追加できます。 また、リンクのためにコンポーネントを接続します。
グリッドの作成を開始します。 一般的に、次のようになりました。
this.gridOptions = <GridOptions>{}; this.gridOptions.columnDefs = [ { headerName: "Example1", field: "Example1", }, { headerName: "Example2", field: "Example2", cellRendererFramework: LinkComponent, }, { headerName: "Example3", field: "Example3", } ]; this.ExampleService.getExamplesFields().then(response => { this.examples = response; this.gridOptions.api.setRowData(this.examples); }); }
コンポーネントのhtmlでは、グリッドは次のように接続されています。
<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-fresh" [gridOptions]="gridOptions"> </ag-grid-angular>
しかし、順番に見てみましょう。 列が必要なデータで満たされるためには、最低限必要です。これはその名前とfieldidです。 2番目の列の
cellRendererFrameworkに注意を
払うと、これがまさにパラメーターであり、必要に応じて列にデータを描画できます。 このコンポーネントが内部にどのように配置されているかを見てみましょう。
import { Component } from "@angular/core"; @Component({ selector: 'link-component', templateUrl: './link-component.component.html' }) export class LinkComponent { public params: any; agInit(params: any): void { this.params = params; } }
これですべて、
パラメーターに目的のセルの内容が格納されます。 より具体的には、params.valueで。 params.dataでは、グリッド内の選択された行のすべてのデータを確認できます。たとえば、目的のレコードIDで次のページに移動するにはexampleIDが必要です。 このコンポーネントのテンプレートは次のようになります。
<a [routerLink]="['/exampleform', params.data.exampleID]">{{ params.value }}</a>
ここではもう少し進んでルーティングについて説明しますが、ここまではリンクについて説明します。 ご覧のとおり、この行をクリックすると、選択したレコードのページに移動し、そのIDがリンクに追加されます。これにより、必要なレコードを返すサーバーに後で連絡できます。
ルーティングを非常に簡単にしました。
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ExamplesView } from './components/Examples/Examples.component'; import { AllExamples } from './components/Examples/Examplest.component'; const appRoutes: Routes = [ { path: 'Examples/:id', component: ExamplesView }, { path: '', component: AllExamples }, ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true }) ], exports: [ RouterModule ], providers: [ ] }) export class AppRoutingModule { }
現時点で必要なのはこれだけです。 ここで特に注意を払う必要はないと思います。 次の記事では、さらに詳しく説明します。
グリッドコンポーネントに戻ります。 列を描画し、列内のデータの表示を変更する方法を見つけました。 次に、これらのデータをグリッドに入力する必要があります。 ここのすべても非常に簡単です：
this.ExampleService.getExamplesFields().then(response => { this.examples = response; this.gridOptions.api.setRowData(this.examples); });
サービスに目を向けると、jsonにデータが返されます。
this.examplesサンプルが
あります：examplesViewModel []; ビューモデルは次のようになります。
export class FeedbackFormData { public Example1: string; public Example2: string; public Example3: number; }
また、コンポーネントにインポートします。 そして、グリッド内のフィールドIDは、モデル内のフィールドIDに対応する必要があります。 そして、私たちのデータは必要な場所にあります。 その後、たとえば、サーバーフィルタリングの存在下でグリッド内のデータを更新する場合、次のようにできます。
filter() { this.exampleFilter = this.datePipe.transform(this.maxDate, 'yyyy-MM-dd'); this.HomeService.getPeriodForm(this.exampleFilter, this.search).then(response => { this.examples= response; this.gridOptions.api.setRowData(this.examples); }) }
そして、グリッド内のデータが更新されます。 さて、2番目のページについては何も言うことはありません。 希望のIDを持つレコードに関するデータを取得し、それらを操作します。 したがって、わずか数時間で、グリッドとブラックジャックを使用した簡単なアプリケーションを作成できます。 次の記事では、グリッドの機能とそれで何ができるかについて詳しく説明します。リンクを描画するコンポーネントは氷山の一角にすぎません。 グリッドでのページネーションとソートの実装についても説明します。
ありがとう