웹 응용 프로그램에서 Angular DataGrid를 빠르게 만드는 방법

FlexGrid 웹 응용 프로그램에서 Angular DataGrid를 빠르게 만드는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-12-15 11:39 조회 665회 댓글 0건

본문

관련링크

DataGrid는 UI 출현 이래 가장 일반적인 시각적 소프트웨어 요소로 자리잡았습니다. 데이터 그리드는 최대한 많은 데이터를 최대한 빨리 받아들이고 이해하는 데 유용합니다. 이제는 데이터 표시뿐 아니라 편집에도 DataGrid가 아주 유용한 시대가 되었습니다.

대다수 사용자는 정렬, 자동 완성과 같은 자동 편의 기능과 사용자 정의 수식과 같은 고급 기능을 갖춘 Microsoft Excel을 당연히 선택하게 됩니다. 사용자가 Excel을 선택하는 이유는 익숙하기 때문입니다.

Excel이 데이터 그리드를 사용하는 소프트웨어의 가장 일반적인 예시가 되었지만 이 패러다임은 소프트웨어 분야에서 더욱 강화되어 왔습니다. 웹 앱이 기존의 기본 애플리케이션을 계속 대체하고 있기 때문에 데이터 그리드가 웹 앱 UI로 이동하는 것이 당연합니다.

시장에는 오픈 소스, 타사 및 자체 개발 등 수많은 JavaScript DataGrid가 있습니다. 이 중에 어떤 것을 선택해야 할까요?

다른 블로그에서 UI 요소인 DataGrid를 유용하게 만드는 것이 무엇이고 FlexGrid가 최상의 Angular DataGrid인 이유에 대해 설명하였습니다. FlexGrid가 작동하는 모습을 확인하고 Angular DataGrid 개요 샘플을 통해 FlexGrid에 대해 자세히 알아보세요.

Wijmo 사본은 NPM, CDN에서 얻거나 GrapeCity 사이트에서 다운로드할 수 있습니다.

이제 FlexGrid를 작동하여 사용자 정의 가능한 Angular DataGrid를 몇 분 내로 빌드해 보겠습니다. Google의 웹 프레임워크인 Angular와 함께 FlexGrid를 사용하는 방법을 보여드리기 위해 다음 응용 프로그램을 사용하려고 합니다. : Angular 샘플 응용 프로그램

Stackblitz를 사용해 샘플을 만들었으므로 유지 관리하고 공유하기 쉽습니다.

그러면 시작해 보겠습니다!

Angular 응용 프로그램을 만드는 방법

이 응용 프로그램의 사본을 만드려면 다음 단계를 따르십시오.

Stackblitz를 엽니다.
화면 상단에서 "Angular/JavaScript" 버튼을 클릭합니다.
"@grapecity/wijmo.all"을 dependency 목록에 입력하여 프로젝트에 Wijmo를 추가합니다.

웹 응용 프로그램에서 Angular DataGrid를 빠르게 만드는 방법

필수 모듈을 가져오는 방법

응용 프로그램의 Angular 버전에서 로직은 app.component.ts 파일에 포함되어 있고, 마크업은 app.component.html 파일에 포함되어 있습니다.

Angular와 Wijmo에서 필요한 클래스 및 스타일을 가져오는 작업부터 시작합니다.

app.module.ts

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

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

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from '@grapecity/wijmo';

styles.css

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

모듈뿐만 아니라 코드가 일부 CSS를 가져오는 방법에 주목하십시오. 여기서는 Wijmo와 함께 포함된 몇 가지 테마 중 하나인 Wijmo의 Material 테마를 선택했습니다.

응용 프로그램 스타일 지정

응용 프로그램의 스타일을 지정하려면 styles.css 파일을 다음과 같이 편집하십시오.

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

데이터 소스는 app.component.ts 파일에 저장되며 다음과 같이 정의됩니다.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from '@grapecity/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
// the data is stored in a https://jsonbin.io/ public repo
constructor(private http: HttpClient) {
  this.http.get('https://api.jsonbin.io/b/5f0765bc5d4af74b01295f26')
    .subscribe(data => {
      this.data.sourceCollection = data;
    });
}
}

app.component.ts 파일은 제조업체로 그룹화되는 "데이터" 속성인 CollectionView를 통해 데이터를 노출합니다. 데이터는 컴포넌트가 구성된 후 비동기식으로 로드됩니다.

데이터는 수신된 후 CollectionView의 sourceCollection 속성에 할당되어 응용 프로그램에서 사용할 수 있게 됩니다.

Angular에서 데이터를 시각화하는 방법

마지막 단계로, FlexGrid를 렌더링하는 app.component.html 파일의 내부에서 마크업을 구현합니다.

<h1>
  2021 Sedans (Angular)
</h1>
<p>
  Sort by model and price by clicking the column headers.
  Filter by value or condition by clicking the filter icons
  in the column headers.
  Collapse and expand makes to see all the models.
  Select one or more models with the mouse or keyboard and
  copy your selection to the clipboard.</p>
<p>
Showing
<b></b> models from
<b></b> makes.
</p>
  <wj-flex-grid [allowResizing]="'None'" [showAlternatingRows]="false" [isReadOnly]="true" [selectionMode]="'ListBox'"
    [headersVisibility]="'Column'" [itemsSource]="data">
  <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'" [aggregate]="'Avg'" [width]="'.5*'"></wj-flex-grid-column>
  <wj-flex-grid-filter></wj-flex-grid-filter>
</wj-flex-grid>

응용 프로그램 헤더에는 짧은 응용 프로그램 설명과 표시되는 모델 및 제조업체의 수에 대한 요약이 포함되어 있습니다. 요약에 있는 수는 사용자가 데이터를 필터링할 때 자동으로 업데이트됩니다. 헤더 다음에는 itemsSource, 표시할 열, 속성 등 그리드의 속성을 초기화하는 “FlexGrid” 요소가 나옵니다.

열 속성에는 각 열의 바인딩, 헤더, 서식, 너비가 있습니다. 가격 열의 aggregate 속성으로 인해 그룹 헤더의 각 제조업체에 대한 평균 가격이 그리드에 표시됩니다.

"FlexGrid" 요소에는 사용자가 모델과 가격을 기준으로 그리드 데이터를 필터링할 수 있도록 열 필터를 추가하는 "FlexGridFilter" 요소가 포함되어 있습니다.

또한 CollectionView에 연결된 몇 가지 데이터 바인딩도 포함했습니다. 이러한 바인딩은 사용자가 적용한 필터를 기준으로 FlexGrid에 표시되는 제조업체와 모델 수를 표시하는 데 사용합니다.