쉽고 빠르게 Angular 그리드 만들기

추천0

페이지 정보

작성자 GrapeCity

작성일 2019-02-11 14:30 조회 7,182회 댓글 0건

검색

본문

Angular 앱 만들기

앱 만들려면 다음 단계를 수행하십시오.

stackblitz 사이트로 이동합니다.
화면 하단의 "Angular / TypeScript"버튼을 클릭하십시오
종속성 목록에 "wijmo"를 입력하여 프로젝트에 Wijmo를 추가하십시오. (자동으로 추가됩니다.)

필요한 모듈 가져오기

해당 앱은 Angular의 HttpClient 모듈을 사용하여 JSON 데이터를 비동기 적으로 로드하고, FlexGrid 및 FlexGridFilter 모듈을 사용하여 데이터를 표시하고 필터링합니다.

필요한 모듈을 가져 오려면 다음과 같이 app.module.ts 파일을 편집하십시오 .

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { WjGridFilterModule } from 'wijmo/wijmo.angular2.grid.filter';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    WjGridModule,
    WjGridFilterModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

CSS로 앱 스타일 지정

앱의 스타일을 지정하려면 다음과 같이 styles.css 파일을 편집하십시오 .

/* styles.css */
@import "wijmo/styles/themes/wijmo.theme.material.css";

body {
  font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;
}

첫 번째 줄은 Wijmo CSS 파일을 가져옵니다. Wijmo에 포함된 여러 샘플 중 하나인, Material 테마를 선택했습니다.

데이터 소스 추가

애플리케이션은 JSON 저장소에서 데이터를 로드하고, 이를 CollectionView로 가져옵니다. 이는 app.component.ts 파일에서 수행됩니다.

// app.component.ts
import { Component from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from 'wijmo/wijmo';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  // create our CollectionView
  data = new WjCore.CollectionView([], {
    groupDescriptions: ['make'] // group my make
  });

  // and populate it from the JSON data source
  constructor(private http: HttpClient) {
    this.http.get('https://api.myjson.com/bins/cqvk8')
      .subscribe(data => {
        this.data.sourceCollection = data;
      });
  }
}

생성자(constructor)는 Angular의 HttpClient를 사용하여 데이터 저장소에서 데이터를 비동기적으로 로드합니다. 데이터가 도착하면 CollectionView의 sourceCollection 속성에 할당되어 응용 프로그램에서 사용할 수 있게됩니다.

데이터 표시

마지막 단계는 app.component.html 파일에서 응용 프로그램 UI를 정의합니다.

<!-- app.component.html -->
<h1>
  2019 Sedans (Angular)</h1>
<p>
  Sort by model and price…</p>

<!-- summary info -->
<p>
  Showing
  <b>{{data ? data.items.length: 0}}</b> models from
  <b>{{data ? data.groups.length: 0}}</b> makes.</p>

<!-- define the grid -->
<wj-flex-grid
  [allowResizing]="'None'" 
  [showAlternatingRows]="false"
  [isReadOnly]="true"
  [selectionMode]="'ListBox'"
  [headersVisibility]="'Column'"
  [itemsSource]="data"

  <!-- define the columns -->
  <wj-flex-grid-column 
    [binding]="'make'" [header]="'Make'" [width]="'*'" [visible]="false">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    [binding]="'model'" [header]="'Model'" [width]="'*'">
  </wj-flex-grid-column>
  <wj-flex-grid-column
    [binding]="'price'" [header]="'Price'" [format]="'c0'" [width]="'.5*'"
    [aggregate]="'Avg'">
  </wj-flex-grid-column>

  <!-- add a column filter -->
  <wj-flex-grid-filter></wj-flex-grid-filter>

</wj-flex-grid>