! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Smart Angular 데이터 테이블을 웹 응용 프로그램에 추가하는 방법 > 인사이트

본문 바로가기

MESCIUS 커뮤니티

인사이트

IT&개발 정보 Smart Angular 데이터 테이블을 웹 응용 프로그램에 추가하는 방법

페이지 정보

작성자 GrapeCity 작성일 2022-11-07 13:49 조회 1,585회 댓글 0건

본문

테이블은 복잡한 데이터를 나타내고 구성하는 가장 쉬운 방법 중 하나이므로 웹 제품에서 널리 퍼져 있습니다. 일반 HTML 테이블로는 가장 흔한 사용 사례 시나리오를 해결할 수 있지만 정교한 작업을 제대로 처리할 수 없습니다.


이때 개발자가 결정을 내려야 합니다. 프로젝트에 대한 중점을 잃을 수 있는 위험이 있는 상태로 HTML 테이블을 만들고 개선 사항을 스스로 추가하거나 이미 이러한 문제를 해결한 기존 시장 제품을 찾아 이전 방식으로 코딩 테이블을 시작합니다.


많은 회사가 복합 보고서, 대시보드, 재무 데이터, 영업 결과, 대화형 스프레드시트를 표시하기 위해 데이터 테이블을 사용합니다. 수요가 많으면 전문화된 공급이 이루어지기 때문에, 테이블은 웹 컴포넌트 라이브러리에서 어디에나 존재하는 자산입니다.


오늘날 테이블 부분을 처리하고 선택 모드, 정렬, 열 다시 정렬 등의 추가 기능을 제공하는 Angular 프레임워크를 위해 만들어진 전용 스마트 테이블 컨트롤이 있습니다.


엔터프라이즈 평가판을 사용하여 Wijmo의 특수 컨트롤을 모두 사용해 보세요! 지금 다운로드하세요!


이 문서는 스마트 테이블에서 예상되는 기능에 대해 설명하고 오픈 소스 프로젝트를 평가하고 Angular 프레임워크의 GrapeCity 솔루션인 Wijmo FlexGrid로 엔터프라이즈급 스마트 데이터 테이블을 구현하는 방법에 대해 보여줍니다.


테이블 기능


스마트 테이블은 얼마나 스마트할까요? 단순히 몇 개의 기능을 일반 HTML 테이블에 추가하는 것은 충분하지 않습니다. 시장에 있는 현재 제품은 매우 다양할 수 있지만 스마트 데이터 테이블을 찾고 있다면 사람들이 예상하는 몇 가지 주요 기능이 있습니다.


  • 데이터 기능

    • 로컬 파일(Excel 가져오기 및 내보내기), 데이터베이스 및 API를 포함하여 데이터를 가져오고 다양한 소스에 내보냅니다

    • 검색, 필터링, 정렬 옵션

    • 페이지 매김 기능으로 대규모 데이터 집합 로드 및 표시

  • UI 기능

    • 열 표시 및 숨기기

    • 인라인 편집

    • 대응 속도: 데스크톱 및 모바일을 위한 기본 제공 지원

    • 긴 데이터 요소 또는 여러 줄 메모를 입력할 수 있도록 열 크기 조정

    • 가로 및 세로 스크롤 지원

    • 스파크라인과 같은 데이터 유효성 검사 및 시각화


일부 프레임워크에는 몇 가지 기능이 포함된 기본 제공 구현이 있지만 계획되지 않은 개발 작업이 필요한 고급 기능을 코딩해야 합니다.



Angular로 데이터 테이블 사용


Google에서 유지보수하며 개별 개발자와 회사가 기여한 Angular는 TypeScript를 기반으로 한 오픈 소스 프런트엔드 웹 응용 프로그램 플랫폼입니다.


다른 가벼운 JavaScript 라이브러리와는 달리 Angular는 정교한 SPA(단일 페이지 응용 프로그램)의 전체 응용 프로그램 디자인 프레임워크입니다. Angular 응용 프로그램은 제한된 아키텍처에 빌드되며 즉, 올바르게 작동되도록 응용 프로그램은 몇 가지 규칙과 좋은 사례로 작성되어야 합니다.


Angular의 견고한 아키텍처는 많은 대기업 및 중소기업에서 이 프레임워크를 채택한 주요 이유 중 하나입니다. 엔터프라이즈 영역에서 이러한 많은 채택을 통해 여러 오픈 소스 커뮤니티 및 타사 공급업체는 Angular 기반의 비즈니스에 대한 생산성 컴포넌트를 만들었습니다.


Angular를 위해 만들어진 몇 가지 인기 있는 오픈 소스 스마트 데이터 테이블 라이브러리는 다음과 같습니다.


ngx-datatable로 Angular 응용 프로그램 구현


위에 나열된 다양한 오픈 소스 프로젝트에는 장단점이 있습니다. 찾고 있는 기능에 따라 이러한 일부 컴포넌트는 다른 컴포넌트보다 점수가 높으므로 이 중 하나에 대해 설명해보겠습니다.


마지막에 설명할 스마트 테이블과 모양과 느낌이 유사한 오픈 소스 컴포넌트인 ngx-datatable로 새로운 노드 기반의 Angular 응용 프로그램을 구현하겠습니다.


먼저 Node.js를 설치합니다. 다음으로 명령줄 콘솔을 이용하여 새로운 노드 응용 프로그램을 만들어 폴더로 이동합니다.

ng new my-app
cd my-app


angular 패키지 설치...

npm i @angular/core


새 응용 프로그램 실행:

npm start


이제 ngx-datatable 및 부트스트랩 패키지를 설치해야 합니다.

npm i @swimlane/ngx-datatable
npm i bootstrap


src 폴더 안에 data라는 새 폴더를 만들고 data.js라는 새 파일을 만듭니다. 이러한 데이터는 데이터 그리드를 채우는 데 사용할 판매 정보를 나타냅니다.

export const recentSales = [
{
 id: 1,
 country: "Canada",
 soldBy: "Bill",
 client: "Cerberus Corp.",
 description: "Prothean artifacts",
 value: 6250,
 itemCount: 50
},
{
 id: 2,
 country: "Canada",
 soldBy: "Bill",
 client: "Strickland Propane",
 description: "Propane and propane accessories",
 value: 2265,
 itemCount: 20
},
{
 id: 3,
 country: "USA",
 soldBy: "Ted",
 client: "Dunder Mifflin",
 description: "Assorted paper-making supplies",
 value: 4700,
 itemCount: 10
},
{
 id: 4,
 country: "USA",
 soldBy: "Ted",
 client: "Utopia Planitia Shipyards",
 description: "Dilithium, duranium, assorted shipbuilding supplies",
 value: 21750,
 itemCount: 250
},
{
 id: 5,
 country: "USA",
 soldBy: "Ted",
 client: "Glengarry Estates",
 description: "Desks, phones, coffee, steak knives, and one Cadillac",
 value: 5000,
 itemCount: 5
},
{
 id: 6,
 country: "Germany",
 soldBy: "Angela",
 client: "Wayne Enterprises",
 description: "Suit armor and run-flat tires",
 value: 35000,
 itemCount: 25
},
{
 id: 7,
 country: "Germany",
 soldBy: "Angela",
 client: "Stark Industries",
 description: "Armor and rocket fuel",
 value: 25000,
 itemCount: 10
},
{
 id: 8,
 country: "Germany",
 soldBy: "Angela",
 client: "Nakatomi Trading Corp.",
 description: "Fire extinguishers and replacement windows",
 value: 15000,
 itemCount: 50
},
{
 id: 9,
 country: "UK",
 soldBy: "Jill",
 client: "Spaceley Sprockets",
 description: "Anti-gravity propulsion units",
 value: 25250,
 itemCount: 50
},
{
 id: 10,
 country: "UK",
 soldBy: "Jill",
 client: "General Products",
 description: "Ion engines",
 value: 33200,
 itemCount: 40
}];


응용 프로그램 폴더 안에 새 opensource-demo 폴더를 추가하고 opensource-demo.css, opensource-demo.html, opensource-demo.ts라는 세 개의 새 파일을 만듭니다.


이러한 파일은 새 컴포넌트에 필요한 스타일시트, HTML 및 TypeScript 코드를 보유합니다.

/my-app
/src
  /app
    /opensource-demo
      opensource-demo.css
      opensource-demo.html
      opensource-demo.ts


opensource-demo.css 파일을 열고 아래에 가져오기를 추가합니다. 이는 오픈 소스 컴포넌트에서 필요한 스타일시트를 적용합니다.

@import '@swimlane/ngx-datatable/themes/bootstrap.css';
@import '@swimlane/ngx-datatable/assets/app.css';
@import 'bootstrap/dist/css/bootstrap.css';


opensource-demo.ts 파일을 열고 아래에 TypeScript 코드를 추가합니다. 여기서는 판매 데이터를 가져오고 데모 클래스를 내보내고 데이터 그리드에서 컴포넌트의 데이터 소스로 사용할 Angular 상태 변수를 선언합니다.

import { Component, ViewEncapsulation } from '@angular/core';
import { recentSales } from "../../data/data"
​
@Component({
 selector: 'app-root',
 styleUrls: ['opensource-demo.css'],
 encapsulation: ViewEncapsulation.None,
 templateUrl: 'opensource-demo.html'
})
export class OpenSourceDemo {
 rows = recentSales;
}


opensource-demo.html 파일을 열고 ngx-datatable 컴포넌트를 포함할 코드를 추가합니다.

<div class="card main-panel">
  <div class="card-header">
      <h1>Open Source Demo</h1>
  </div>
  <div class="card-body">
      <div class="container-fluid">
          <ngx-datatable
            class="bootstrap"
            [rows]="rows"
            [headerHeight]="50"
            rowHeight="40">
            <ngx-datatable-column name="Id" prop="id"></ngx-datatable-column>
            <ngx-datatable-column name="Country" prop="country"></ngx-datatable-column>
            <ngx-datatable-column name="Sold By" prop="soldBy"></ngx-datatable-column>
            <ngx-datatable-column name="Client" prop="client">
            </ngx-datatable-column>        
            <ngx-datatable-column name="Description" prop="description">
            </ngx-datatable-column>
            <ngx-datatable-column name="Value" prop="value"></ngx-datatable-column>
            <ngx-datatable-column name="Item Count" prop="itemCount"></ngx-datatable-column>        
          </ngx-datatable>
      </div>
  </div>
</div>


src\app 폴더에 있는 app.module.ts 파일을 편집하여 콘텐츠를 아래 줄로 바꿉니다.


NgxDatatableModule을 가져와 오픈 소스 컴포넌트에 데모를 제공하는 방법을 확인하십시오.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OpenSourceDemo } from './opensource-demo/opensource-demo';
​
// import NgxDatatable modules
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
​
@NgModule({
 declarations: [
   OpenSourceDemo
],
 imports: [
   BrowserModule,
   NgxDatatableModule
],
 providers: [],
 bootstrap: [OpenSourceDemo]
})
export class AppModule { }


이제 응용 프로그램을 실행합니다.

npm start


응용 프로그램이 실행되면, ngx-datatable 컴포넌트가 판매 데이터를 나타내고 있는 것을 확인할 수 있습니다.


오픈 소스 데모


일부 컴포넌트 기능을 표시하려면 셀 값 업데이트를 지원하도록 오픈 소스 데이터 그리드를 사용자 정의해 보세요.



셀 값 업데이트 구현


ngx-datatable 프로젝트는 셀 값 업데이트를 지원하지만 바로 이용할 수 있도록 제공되지는 않습니다. 이 기능을 사용하려면 구현을 위해 몇 가지 단계를 따라야 합니다.


먼저 opensource-demo.ts 파일을 열고 OpenSourceDemo 클래스에 updateValue 함수를 포함합니다. ngx-datatable 컴포넌트는 사용자가 셀 값 편집을 완료할 때마다 이 함수를 호출합니다.

export class OpenSourceDemo {
 editing = {};
 rows = recentSales;
​
 updateValue(event, cell, rowIndex) {
     this.editing[rowIndex + '-' + cell] = false;
     this.rows[rowIndex][cell] = event.target.value;
     this.rows = [...this.rows];
}
}


Client 및 Description 열을 편집할 수 있도록 opensource-demo.html 파일을 수정합니다.

<ngx-datatable-column name="Client" prop="client">
  <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
      <span title="Double click to edit"
      (dblclick)="editing[rowIndex + '-client'] = true"
      *ngIf="!editing[rowIndex + '-client']"
      >{{value}}
      </span>
      <input
      autofocus
      (blur)="updateValue($event, 'client', rowIndex)"
      *ngIf="editing[rowIndex + '-client']"
      type="text"
      [value]="value"
      />
  </ng-template>
</ngx-datatable-column>        
<ngx-datatable-column name="Description" prop="description">
  <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
      <span title="Double click to edit"
      (dblclick)="editing[rowIndex + '-description'] = true"
      *ngIf="!editing[rowIndex + '-description']"
      >{{value}}
      </span>
      <input
      autofocus
      (blur)="updateValue($event, 'description', rowIndex)"
      *ngIf="editing[rowIndex + '-description']"
      type="text"
      [value]="value"
      />
  </ng-template>            
</ngx-datatable-column>


보시다시피 위의 코드는 dblclick 이벤트 처리기를 사용하여 셀을 두 번 클릭하면 ngx-datatable이 텍스트 편집기를 열도록 하고 사용자가 편집을 완료하면 blur 이벤트 처리기가 셀 값을 업데이트하도록 합니다.


이러한 변경으로 ngx-datatable은 Client 및 Description 열에서 업데이트를 처리하고 기본 데이터 소스에서 유지할 수 있습니다.


Client 열


단일 데이터 테이블을 사용자 정의하기 위해 몇 개의 줄을 수정하거나 추가하는 것은 큰 문제로 보이지 않습니다. 하지만 여러 프로젝트에서 수많은 페이지에 구현된 다양한 스마트 테이블이 있는 경우 조직에 더 견고하고 지속적인 솔루션이 필요하다는 것은 명백해집니다.



오픈 소스 데이터 테이블 사용자 정의에 대한 대안


매일 사용할 수 있도록 오픈 소스 스마트 테이블 컴포넌트는 작업을 수행하며 기본 요구 사항을 이행하기에도 충분합니다. 하지만 회사에서 업계 최고 수준의 응용 프로그램을 개발하고 있는 경우 여러 JavaScript 프레임워크를 지원하고 전체 기능 집합을 포괄할 수 있는 보다 전문적인 제품을 알아봐야 할 것입니다.


GrapeCity는 몇 개의 코드 라인으로 Angular 응용 프로그램에서 구현할 수 있는 여러 데이터 테이블 제품을 제공합니다. 이러한 제품에는 오픈 소스 컴포넌트에서 이전에 한 것처럼 사용자 정의해야 하는 풍부한 기능 집합이 포함되어 있습니다.


SpreadJS 및 Wijmo FlexGrid를 비롯한 GrapeCity에서 제공하는 가볍고 스마트한 테이블 제품의 중요 내용을 몇 가지 살펴보겠습니다.



SpreadJS


SpreadJS는 450가지가 넘는 Excel 함수를 지원하는 세계 판매 최고의 JavaScript 스프레드시트입니다. SpreadJS는 React, Vue, Angular 및 TypeScript를 완전히 지원하며 Excel에 종속되지 않는 Excel과 유사한 스프레드시트 환경을 신속하게 제공할 수 있습니다.


SpreadJS를 사용하면 표준 스프레드시트 시나리오에 대한 재무 보고서 및 대시보드, 예산 책정 및 예측 모델, 과학, 엔지니어링, 의료, 교육, 과학 랩 노트북 및 기타 JavaScript 응용 프로그램을 만들 수 있습니다.


SpreadJS의 포괄적인 API를 사용하면 사용자 정의 스프레드시트, 고급 그리드, 대시보드, 보고서, 데이터 입력 양식을 만들 수 있으므로 보다 뛰어난 스프레드시트 사용 사례를 구현할 수 있습니다. SpreadJS는 고속 계산 엔진으로 구동되기 때문에 가장 복잡한 계산도 가능하게 합니다.


SpreadJS는 가장 까다로운 Excel 스프레드시트와 호환되는 가져오기 및 내보내기 기능으로 통합을 가능하게 합니다.



Wijmo FlexGrid 


FlexGrid는 Wijmo 제품군 중 일부로, FlexChart, Input, PivotChart, FinancialChart, ReportViewer 등의 JavaScript/HTML5 UI 컴포넌트도 포함합니다. FlexGrid는 Angular, AngularJS, ReactJS, VueJS 및 Knockout을 완전히 지원합니다.


빠른 속도와 확장성을 자랑하는 Wijmo FlexGrid는 최고의 JavaScript 스마트 데이터 그리드입니다. FlexGrid는 사용 공간을 줄여 성능을 향상했으며 웹 응용 프로그램의 소형화로 로드 시간을 단축했습니다.


FlexGrid를 사용하면 데이터 집계, 셀 병합, 배율 크기 조정, 셀 고정과 같이 Excel과 유사한 기능의 이점을 활용할 수 있습니다. 또한 셀 템플릿을 사용하면 그리드의 선언적 마크업 및 바인딩 식이 있는 템플릿을 무제한으로 이용할 수 있습니다.


GrapeCity의 각 제품은 가벼우면서 가상화 작업이 가능하며 방대한 데이터 소스와 연결되었을 때도 고성능 상태로 작동이 유지됩니다.



Wijmo FlexGrid가 포함된 Angular 스마트 데이터 테이블


이제 이전에 빌드했던 동일한 Node.JS 응용 프로그램에 Wijmo FlexGrid 스마트 테이블을 구현하는 방법을 살펴보겠습니다.


먼저 npm과 함께 Wijmo 패키지를 설치합니다.

npm install @grapecity/wijmo.angular2.all


응용 프로그램 폴더 안에 새 flexgrid-demo 폴더를 추가하고 flexgrid-demo.css, flexgrid-demo.html, flexgrid-demo.ts라는 세 개의 새 파일을 만듭니다.

/my-app
/src
  /app
    /flexgrid-demo
       flexgrid-demo.css
       flexgrid-demo.html
       flexgrid-demo.ts


flexgrid-demo.ts 파일을 열고 다음 라인을 추가하여 Wijmo FlexGrid 모듈을 가져오고 FlexGridDemo 컴포넌트를 내보냅니다.

import { Component, NgModule, ViewChild, ViewEncapsulation } from '@angular/core';
​
// import Wijmo components
import * as wjcCore from '@grapecity/wijmo';
import * as wjcGrid from '@grapecity/wijmo.grid';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { recentSales } from "../../data/data"
​
@Component({
 selector: 'app-root',
 templateUrl: 'flexgrid-demo.html',
 styleUrls: ['flexgrid-demo.css'],
 encapsulation: ViewEncapsulation.None
})
export class FlexGridDemo {
 sales: any[];
 
 // references FlexGrid named 'flex' in the view
 @ViewChild('flex') flex: wjcGrid.FlexGrid;
​
 // DataSvc will be passed by derived classes
 constructor() {
     this.sales = recentSales;
}
}


flexgrid-demo.html을 열고 아래 코드를 추가하여 wj-flex-grid 및 wj-flex-grid-column 컴포넌트를 구현합니다.

<div class="card main-panel">
<div class="card-header">
    <h1>Wijmo FlexGrid Demo</h1>
</div>
<div class="card-body">
  <div class="container-fluid">
    <wj-flex-grid #flex
        [itemsSource]="sales">
        <wj-flex-grid-column [header]="'ID'" [binding]="'id'" [width]="50"></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Client'" [binding]="'client'" [width]="150"></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Description'" [binding]="'description'" [width]="320"></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Value'" format="n2" [binding]="'value'" [width]="100"></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Quantity'" format="n0" [binding]="'itemCount'" [width]="100"></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Sold By'" [binding]="'soldBy'" [width]="100"></wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Country'" [binding]="'country'" [width]="100"></wj-flex-grid-column>
    </wj-flex-grid>
  </div>
</div>
</div>


app.module.ts 파일을 수정하여 새 FlexGridDemo 컴포넌트를 가져와 참조합니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { OpenSourceDemo } from './opensource-demo/opensource-demo';
import { FlexGridDemo } from './flexgrid-demo/flexgrid-demo';
​
// import NgxDatatable modules
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
​
// import Wijmo modules
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
​
// apply Wijmo license key
import { setLicenseKey } from '@grapecity/wijmo';
setLicenseKey('your license key goes here');
​
@NgModule({
 declarations: [
   OpenSourceDemo,
   FlexGridDemo
],
 imports: [
   BrowserModule,
   WjGridModule,
   NgxDatatableModule
],
 providers: [],
 // bootstrap: [OpenSourceDemo]
 bootstrap: [FlexGridDemo]
})
export class AppModule { }


opensource-demo.css 파일을 열고 아래에 가져오기를 추가합니다. 이는 FlexGridcomponent에서 필요한 스타일시트를 적용합니다.

@import "@grapecity/wijmo.styles/wijmo.css";
@import 'bootstrap/dist/css/bootstrap.css';


이제 응용 프로그램을 실행합니다.

npm start


응용 프로그램이 실행되면, FlexGrid 컴포넌트가 판매 데이터를 나타내고 있는 것을 확인할 수 있습니다.


Wijmo Flexgrid 데모

FlexGrid로 그리드 셀 값 편집


FlexGrid에서는 셀 편집 기능을 즉시 사용할 수 있습니다. 셀을 더블 클릭하면 그 위치에서 편집을 시작할 수 있습니다.


셀 편집


기본적으로 FlexGridColumn은 편집 가능합니다. 하지만 FlexGridColumn 컴포넌트에서 isReadOnly 속성을 명시적으로 정의하여 편집을 비활성화할 수 있습니다.

<wj-flex-grid-column [header]="'ID'" [binding]="'id'" [width]="50" [isReadOnly]="true">
</wj-flex-grid-column>



FlexGrid로 행 정렬


기본적으로 모든 FlexGrid 열은 오름차순 또는 내림차순으로 정렬 가능합니다.

allowSorting 속성을 false로 설정하여 열 정렬 기능을 잠글 수 있습니다.

<wj-flex-grid-column [header]="'Client'" [binding]="'client'" [width]="150" [allowSorting]="false"></wj-flex-grid-column>



FlexGrid로 열 다시 정렬


FlexGrid에서는 열의 위치를 즉시 자유롭게 변경할 수 있습니다.


열 위치 변경


다시 말하지만 allowDragging 속성을 false로 설정하여 열 다시 정렬 기능을 비활성화할 수 있습니다.

<wj-flex-grid-column [header]="'Client'" [binding]="'client'" [width]="150" [allowDragging]="false">
</wj-flex-grid-column>   


FlexGrid로 Excel 데이터 가져오기


이제 Excel 데이터를 FlexGrid 컴포넌트로 가져오는 방법을 알아보겠습니다.

render 함수의 card-body div 뒤에 다음 HTML 세그먼트를 추가합니다.

<div className="card-body">
<div class="card-footer">  
<div class="input-group">
  <div class="custom-file">
    <input type="file" id="importFile"/>
  </div>
  <div class="input-group-prepend">
    <input type="button" value="Import"/>
  </div>
</div>
</div>


응용 프로그램을 실행하면 페이지 하단에 가져오기 섹션이 있습니다.

가져오기


이제 가져오기 버튼을 사용하여 FlexGrid 컴포넌트로 파일을 가져와야 합니다. onClick 함수를 입력 요소에 추가하고 함수 이름을 "load"로 변경합니다.

<input type="button" value="Import" (click)="load()"/>


그런 다음 flexgrid-demo.ts 파일의 컴포넌트 클래스 내에 새 로드 함수를 추가합니다. 여기서 먼저 사용자가 선택한 파일의 전체 경로를 가져옵니다.

load() {
   let fileInput = <HTMLInputElement>document.getElementById('importFile');
   if (fileInput.files[0]) {
​
  }
}


이제 가져오기 지침을 Wijmo 라이브러리에 추가하면 구현하고자 하는 Excel 함수를 처리합니다.

import * as wjcXlsx from '@grapecity/wijmo.xlsx';
import * as wjcGridXlsx from '@grapecity/wijmo.grid.xlsx';


다시 로드 함수로 돌아가서 Wijmo 라이브러리의 loadAsync 함수에 호출을 추가하여 파일 내용을 FlexGrid에 로드합니다.

load() {
   let fileInput = <HTMLInputElement>document.getElementById('importFile');
   if (fileInput.files[0]) {
       wjcGridXlsx.FlexGridXlsxConverter.loadAsync(this.flex, fileInput.files[0], { includeColumnHeaders: true });
  }
}


응용 프로그램을 재실행하여 가져오기 기능을 테스트합니다.

npm start


Excel을 열어 다음 내용이 포함된 새 Demo.xlsx 파일을 만듭니다.

새 데모 만들기

Angular 앱으로 돌아가 파일 선택을 클릭하고 Demo.xlsx를 선택하고 가져오기를 클릭하여 결과를 확인합니다.


Wijmo Flexgrid 데모

FlexGrid로 그리드 데이터를 Excel로 내보내기


마지막으로 FlexGrid에서 Excel로 데이터를 내보내기 위해서는 무엇이 필요한지 알아보겠습니다.


먼저 가져오기 버튼 코드 뒤에 다음 HTML 조각을 추가하여 새 내보내기 버튼을 추가합니다.

<div class="input-group-append">
<input type="button" value="Export" (click)="save()"/>
</div>


click 이벤트 처리기는 저장 함수를 가리킵니다. 이 함수를 컴포넌트 클래스 내에 구현해 봅시다.

save() {
​
}


FlexGrid 데이터를 Excel 파일로 내보내려면 FlexGridXlsxConverter 클래스의 saveAsync 함수를 호출해야 합니다.

save() {
 wjcGridXlsx.FlexGridXlsxConverter.saveAsync(this.flex,
  {
     includeColumnHeaders: true,
     includeCellStyles: false,
     formatItem: null
  },
   'FlexGrid.xlsx');
}


응용 프로그램을 다시 실행한 후 내보내기 버튼을 테스트해 봅니다.


내보내기


이제 FlexGrid 컴포넌트에서 내보낸 Excel 파일을 열어볼 수 있습니다.

Excel 파일


이 데모는 FlexGrid 컴포넌트의 아주 일부분에 지나지 않습니다. 전체 설명서, 데모, Angular, React, Vue용으로 작성된 예시를 찾으려면 JavaScript UI 컴포넌트 및 도구의 Wijmo 제품군에 대한 GrapeCity 페이지를 탐색할 수 있습니다.



마무리하며


Angular 기반의 스마트 데이터 테이블을 만들고 사용하는 다양한 방법이 있습니다. Angular는 서식 있는 JavaScript 프레임워크이며 JavaScript 라이브러리보다 상대적으로 더 복잡하므로 일부 접근 방식에 훨씬 더 많은 수동 작업이 필요합니다. 하지만 Angular를 사용자 정의하기 전까지는 그 차이를 알 수 없습니다.


요구 사항에 적절한 무료 및 오픈 소스 테이블 라이브러리가 많이 있습니다. 우리는 이 문서에서 해당 테이블 라이브러리 중 몇 가지를 구현하는 방법에 대해 알아보았습니다. 그러나 비즈니스 및 엔터프라이즈 프로젝트의 경우 개발자는 주의가 산만해져 차선책이나 추가 기능 또는 구성을 개발하는 데 시간을 낭비하고 싶지 않습니다. 이것이 바로 Wijmo와 같은 상용 라이브러리 컴포넌트 제품군이 확실한 투자 수익률을 보장할 수 있는 이유입니다.


프레임워크에 구애받지 않도록 구축된 Wijmo는 Angular, AngularJS, ReactJS 및 VueJS를 완전히 지원하며, 프레임워크 전체에서 동일한 그리드를 가집니다. 다양한 라이브러리에서 이 일관성은 선택의 자유를 제공하며 조직에서 다른 JavaScript 프레임워크로 마이그레이션하기로 결정한 경우 시간과 개발 노력을 절약할 수 있음을 의미합니다.




지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.