쉽고 빠르게 Angular 앱에 데이터 그리드 추가하기
페이지 정보
작성자 GrapeCity
작성일 2020-01-29 00:00 조회 7,446회
댓글 0건
본문
관련링크
그리드에 데이터를 표시해야하는 엔터프라이즈 웹 애플리케이션 개발자는 딜레마에 직면하곤 합니다. 단순하고 작성하기 쉽지만 기능이 없는 일반 HTML 테이블을 사용할 수도 있고, 또는 필요하는 성능, 기능 및 지원을 어느 정도 만족시키는 애매 모호한 오프소스를 사용할 수 있습니다. 하지만 이런 경우에는, 확장을 하는데 많은 어려움이 있을 수 있습니다.
이제 그런 고민은 하지 마시고, 완전한 데이터 그리드(Grid)인 Wijmo FlexGrid를 사용해보세요. Wijmo는 개발자기 필요하는 하는 기능들이 풍부하게 포함되어 있고, 엄청나게 빠르며, 또한, 코드 설치 공간이 작습니다.
FlexGrid는 Angular 2에서 Angular 9까지의 모든 버전을 지원하여 필요한 Angular 구성 요소를 만드는 데 필요한 작업을 단순화하는 Angular 래퍼를 제공합니다.이 포스팅에서는 Angular 8을 사용합니다.
Angular 8과 함께 Wijmo FlexGrid 사용
Angular 8 응용 프로그램에서 Wijmo FlexGrid 테이블을 사용하는 것이 얼마나 쉬운지 알아보기 위해 데이터 바인딩 된 HTML 테이블이 포함된 간단한 Angular 컴포넌트를 만든는 것 부터 시작하겠습니다. 해당 버전이 작동하면 코드를 변경하여, HTML를 Wijmo FlexGrid로 전환해 보겠습니다.
node.js가 설치되었다고 가정하고, Node Package Manager(npm)를 사용하여, angular.io 로컬 설정을 사용하여, Angular 8 애플리케이션을 작성하십시오. 명령 쉘(shell)/터미널(terminal)을 열고 다음을 입력하십시오.
npm install -g @angular/cli ng new my-app
라우팅의 경우 기본값 N을, 스타일 시트 유형의 경우 CSS를 선택한 후 다음을 입력하십시오.
cd my-app ng serve --open
위 명령을 실행하면, 응용 프로그램은 기본 브라우저의 http://localhost : 4200/ 에 표시됩니다.
이제 명령 프롬프트로 돌아가서 Ctrl-C를 눌러 ng serve를 중단하십시오. 우리는 Angular CLI를 사용하여, 간단한 Angular 컴포넌트를 만들고, 일반적인 HTML 테이블에 데이터를 바인딩 해볼 것입니다. 프롬프트에서 다음을 입력하십시오.
ng generate component MyDataGrid code . ng serve
첫 번째 줄은 새 구성 요소를 만들고 두 번째 줄은 Visual Studio Code를 열어 현재 디렉토리의 파일을 편집합니다. 원하는 경우 다른 편집기를 사용할 수 있습니다. 여기서 --open 매개 변수 는 필요하지 않습니다 . 여전히 브라우저가 열려 있다고 가정합니다.
ng serve가 자동으로 에디터에서 변경이 저장될 때마다, app을 리빌드하고 브라우저를 리프레쉬 하기 때문에, 우리는 단순히 편집하고 저장하는 것 만으로도, 결과 화면을 확인 할 수 있습니다.
다음으로, 앱의 app.component.html 페이지에서 새로운 컴포넌트들을 보다 쉽게 볼 수 있도록 일부 불필요한 코드들을 정리합니다. 따라서 아래 표시된 행의 내용 부터 아래의 모든 항목을 삭제하십시오. (Angular 8.2.14 버전에는 329줄 부터 삭제)
<div class="content" role="main">
그리고 이것을 모두 다음과 같이 바꾸십시오.
<app-my-data-grid></app-my-data-grid>
다음은 변경 후 마지막 몇 줄을 보여주는 코드 끝 부분에서 발췌 한 것입니다.
변경 사항을 저장 한 후에는, 아래와 같이 자동으로 빌드되고 결과 값이 표시됩니다.
다음으로, 새로운 컴포넌트를 업데이트할 것입니다. 이는 평현한 데이터 바인딩과 Angular의 HTTPClientModule을 이용하여, 데이터 소스를 추가하고 이것을 간단한 HTML 테이블에 연결하여 구현할 수 있습니다. 먼저 app.module.ts 파일을 편집하여, 아래에 표시된 import 참조를 추가한 후 import 명령문으로 다음을 추가하십시오.
import { HttpClientModule } from '@angular/common/http';
이제 모듈 import 콜렉션에 참조를 추가하십시오. 이미 참조는 우리의 새로운 컴포넌드를 가리키고 있습니다. 이들은 컴포넌트가 생성 될 때 Angular CLI에 의해 자동으로 추가되었습니다.
최종 코드는 다음과 같아야합니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyDataGridComponent } from './my-data-grid/my-data-grid.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
MyDataGridComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } 그런 다음 src/app/my-data-grid 폴더로 이동하여 my-data-grid.component.ts를 엽니 다 . 이곳이 데이터 소스를 추가 할 곳입니다. 다른 import와 함께 HttpClient에 대한 참조를 추가하십시오.
import { HttpClient } from '@angular/common/http';
기본 생성자를 교체하십시오.
constructor() { }
생성자는 아래와 같습니다:
data: any;
constructor(private http: HttpClient) {
this .http.get('https://data.gov.au/geoserver/ballarat-community-food-activities/wfs?request=GetFeature&typeName=ckan_70374622_81eb_4e84_ac43_587e4a4b8121&outputFormat=json')
.subscribe(data => {
this.data = data;
});
} 최종 코드는 다음과 같아야 합니다.
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-my-data-grid',
templateUrl: './my-data-grid.component.html',
styleUrls: ['./my-data-grid.component.css']
})
export class MyDataGridComponent implements OnInit {
data: any;
constructor(private http: HttpClient) {
this .http.get('https://data.gov.au/geoserver/ballarat-community-food-activities/wfs?request=GetFeature&typeName=ckan_70374622_81eb_4e84_ac43_587e4a4b8121&outputFormat=json')
.subscribe(data => {
this.data = data;
});
}
ngOnInit() {
}
} 파일을 저장하십시오. 눈에 띄는 변화는 없지만 브라우저를 새로 고침해야합니다. F12 브라우저 디버거를 사용하여 네트워크 트래픽을보고 방금 추가 된 JSON 데이터에 대한 요청을 볼 수 있습니다.
그런 다음 my-data-grid.component.html 파일을 열어 데이터 를 간략하게 분석 할 JSON 파이프를 설정하십시오.
기존 줄 바로 뒤에 다음 Angular 디버그 코드를 추가하십시오.
<pre>{{ data | json }}</pre>
파일을 저장하고 브라우저로 전환하면, JSON 데이터의 구조가 표시됩니다.
이제 위에서 작성한 Angular 디버그 코드를 삭제하거나 주석를 하신 후에, 아래와 같이 basic Angular 8 data-driven HTML 테이블를 작성해주세요.
<p>my-data-grid works!</p>
<table>
<tr>
<th>Type</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr *ngFor="let item of data.features">
<td>{{item.properties.type}}</td>
<td>{{item.properties.name}}</td>
<td>{{item.properties.address}}</td>
</tr>
</table> 작업을 저장하면 브라우저가 새로 고쳐지고 다음 결과 화면이 표시됩니다.
소수의 행을 가진 간단한 데이터의 경우, Angular 8을 통해 쉽게 화면에 표실 할 수 있습니다. 하지만, 불행하게도, 정렬, 검색, 그룹화 또는 필터링과 같은 추가 기능을 추가하려고 하면 작업이 정말 복잡해집니다.
우리는 해당 프로젝트를 위해 작고 간단한 데이터 샘플을 사용했습니다. 일반적으로 대량의 행( 예를 들어 샌프란시스코의 푸드 트럭 위치( 3000 행의 JSON 데이터 )등)이 관련된 실제 상황의 경우, 사용자가 이해하기 쉽도록 페이징을 추가해야합니다. 또한 대량의 데이터는 이러한 간단한 HTML 테이블과 관련 Angular 코드(정렬, 필터링 추가 등을)를 너무 크게 만들어 브라우저의 크롤링 속도를 늦추고 충돌을 야기할 수도 있습니다.
기본 HTML 테이블 사용에서 Wijmo FlexGrid로 전환 할 때 이러한 문제로 부터 앱을 구출하는 것이 얼마나 쉬운 지 봅시다. Ctrl-C를 눌러 명령 쉘로 돌아가서 다음을 입력하십시오.
npm install @grapecity/wijmo.angular2.all ng serve
npm을 사용하여 Wijmo 라이브러리를 설치 한 다음 serve 를 다시 실행하십시오 . app.module.ts를 다시 편집 하여 이번에는 Wijmo 라이브러리에 대한 참조를 추가합니다. 앞에서 추가 한 HttpClientModule import 근처에 다음 행을 삽입하십시오.
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter';그런 다음 module import section에 다음 줄을 추가하십시오. 각 항목 사이에 쉼표를 추가하십시오.
WjGridModule,
WjGridFilterModule 이 단계의 전체 코드는 다음과 같습니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyDataGridComponent } from './my-data-grid/my-data-grid.component';
import { HttpClientModule } from '@angular/common/http';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter';
@NgModule({
declarations: [
AppComponent,
MyDataGridComponent
],
imports: [
BrowserModule,
HttpClientModule,
WjGridModule,
WjGridFilterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } styles.css 파일에 간단한 CSS를 추가하여 새로운 데이터 그리드를 돋보이게합니다. 필요에 따라 그리드의 기본 글꼴과 너비 및 높이를 쉽게 변경할 수 있습니다.
/* You can add global styles to this file, and also import other style files */
@import "@grapecity/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: 100%;
} 이제 FlexGrid를 사용하도록 컴포넌트를 업데이트할 준비가되었습니다. 먼저 my-data-grid.component.ts 파일에서 이전에 데이터 소스를 추가 한 후 Wijmo 라이브러리를 가져 오려면 다음을 추가하십시오.
import * as WjCore from '@grapecity/wijmo';
그런 다음 이전에 작성한 코드를 업데이트하십시오. Wijmo data collection을 이용하여 데이터 유형을 재정의 할 것이며, 또한 데이터 바인딩을 약간 단순화하고, 뷰에 전달하기 전에 데이터 소스에서 features 속성을 선택할 것입니다.
다음은 my-data-grid.component.ts를 업데이트하는 코드입니다.
data = new WjCore.CollectionView([], {
// add groupDescriptions here
});
constructor(private http: HttpClient) {
this .http.get('https://data.gov.au/geoserver/ballarat-community-food-activities/wfs?request=GetFeature&typeName=ckan_70374622_81eb_4e84_ac43_587e4a4b8121&outputFormat=json')
.subscribe(data => {
this.data.sourceCollection = data["features"];
});
} 이 단계의 전체 코드는 다음과 같습니다.
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from '@grapecity/wijmo';
@Component({
selector: 'app-my-data-grid',
templateUrl: './my-data-grid.component.html',
styleUrls: ['./my-data-grid.component.css']
})
export class MyDataGridComponent implements OnInit {
data = new WjCore.CollectionView([], {
// add groupDescriptions here
});
constructor(private http: HttpClient) {
this .http.get('https://data.gov.au/geoserver/ballarat-community-food-activities/wfs?request=GetFeature&typeName=ckan_70374622_81eb_4e84_ac43_587e4a4b8121&outputFormat=json')
.subscribe(data => {
this.data.sourceCollection = data["features"];
});
}
ngOnInit() {
}
} 다음으로 my-data-grid.component.html 파일을 편집하여, 뷰(View)를 업데이트하십시오.
<p>my-data-grid works!</p>
<!-- define the grid -->
<wj-flex-grid
[allowResizing]="'None'"
[alternatingRowStep]=0
[isReadOnly]="true"
[selectionMode]="'ListBox'"
[headersVisibility]="'Column'"
[itemsSource]="data">
<!-- define the columns -->
<wj-flex-grid-column [binding]="'properties.type'" [header]="'Type'" [width]="'*'">
</wj-flex-grid-column>
<wj-flex-grid-column [binding]="'properties.name'" [header]="'Name'" [width]="'*'">
</wj-flex-grid-column>
<wj-flex-grid-column [binding]="'properties.address'" [header]="'Address'" [width]="'*'">
</wj-flex-grid-column>
</wj-flex-grid>작업을 저장한 다음 브라우저를 확인하면 FlexGrid가 실제로 작동하는 것을 볼 수 있습니다.
이때 워터 마크가 나타날 수 있습니다. Wijmo를 구매하고 라이선스 키를 등록하면 이는 제거됩니다.
정렬을 포함하여 많은 핵심 기능이미 Wijmo Grid 안에 내장되어 있습니다. 별도의 코딩 없이 열 제목을 클릭 한 다음, 다시 클릭하면 역순으로 정렬됩니다. 그리고 그룹화 구현하는 방법도 아주 쉽습니다. my-data-grid.component.ts 에서 다음과 같이 줄을 변경하십시오 .
// add groupDescriptions here:
아래와 같이 작성합니다:
groupDescriptions:
이제 파일을 저장하십시오. 선택한 열을 기준으로 그룹화를 표시하도록 브라우저가 새로 고쳐집니다.
스크린 샷은 일부 그룹이 "접힌(folded)"그룹과 함께, 그룹핑 동작을 실제로 보여줍니다. 또 다른 기본 제공 기능인 행 강조 표시도 표시됩니다. FlexGrid는 shift-click 및 ctrl-click 선택기를 기본 제공하기 때문에 상당히 향상된 단일 및 다중 행 및 열 선택 기능을 제공합니다.
대체 행을 강조 표시하는 것, 또한 역시 간단합니다. my-data-grid.component.html 파일의 HTML 보기에서, 아래와 같이 속성값을 0에서 1로 값을 뒤집기 만하면 됩니다.
[alternatingRowStep]=1
isReadOnly의 속성값을 true에서 false로 바꾸면, Excel에서와 같이 F2 또는 더블 클릭을 통해 모든 셀 을 편집할 수 있습니다.
활성화되면 전체 그리드에서 편집이 가능합니다. 만약 ID 열의 편집을 방지하려면 다시 읽기 전용으로 만들려는 열의 속성 목록에 다음을 추가기만 하면됩니다.
[isReadOnly]="true"
이제 Angular 애플리케이션이 기본 데이터 바인딩 HTML 테이블을 사용하는 대신 Wijmo FlexGrid로 변환하는 것이 얼마나 간단하고 쉬운지 보실 수 있습니다. 페이징 및 필터링을 추가하는 것 역시도 똑같이 쉽지만, 이번 포스팅에서는 다루지 않겠습니다.
대신 아래의 링크를 통해 직접, 페이징 및 필터링을 구현해 볼 수 있습니다.
Wijmo 튜토리얼을 통해 Angular, React, Vue, Pure JavaScript 어플리케이션에서 적용해볼 수 있는 많은 훌륭한 기능을 설명합니다.
위에 서는 대량의 코드없이 애플리케이션에 놀라운 대화식 테이블을 추가했습니다. 여기에는 사용자가 최신 웹 앱에서 볼 수있는 모든 기능이 포함되어 있습니다. Wijmo FlexGrid 라이센스를 구입하면, 더 많은 훌륭한 Wijmo 컨트롤도 모두 사용할 수 있습니다.
Wijmo FlexGrid는 대규모 데이터 세트에서도 충돌하지 않습니다.
Wijmo FlexGrid의 성능을 확인 하려면 아래 벤치 마크 를 살펴보십시오.
댓글목록
등록된 댓글이 없습니다.
