SpreadJS와 Angular 데이터 바인딩 > 블로그 & Tips

본문 바로가기

SpreadJS

블로그 & Tips

SpreadJS와 Angular 데이터 바인딩

페이지 정보

작성자 GrapeCity 작성일 21-04-09 11:08 조회 225회 댓글 0건

본문

SpreadJS는 Excel과 유사한 매우 강력한 스프레드시트 컴포넌트입니다. SpreadJS는 프레임워크 독립적이므로 다양한 JavaScript 프레임워크 내에서 사용할 수 있습니다. 이러한 프레임워크에는 Angular도 포함됩니다!


SpreadJS의 강력한 기능 중 하나는 데이터 바인딩입니다.


Angular 프로젝트가 포함된 SpreadJS에서 데이터 바인딩을 사용하는 방법을 자세히 설명하는 자습서를 만들었습니다.



Angular 프로젝트 설정


먼저 Angular 프로젝트를 설정해야 합니다. 이 자습서에서는 Angular 10 프로젝트를 사용하겠습니다.


ng new 프로젝트 이름을 사용해 새로운 Angular 10 프로젝트를 만듭니다. 이 예시에서는 프로젝트 이름을 spreadJS-angular로 지정합니다.

ng new spreadJS-angular


이제 디렉터리를 새 프로젝트로 변경합니다.

cd spreadJS-angular


다음과 같이 프로젝트를 실행합니다.

ng serve –open


Angular 10 시작 페이지가 이제 http://localhost:4200/으로 제공되고 있습니다.



SpreadJS 및 데이터 바인딩을 Angular 프로젝트에 추가


Angular 10 프로젝트를 시작하여 실행하였으므로 이제 시작 페이지 콘텐츠를 제거하고 SpreadJS를 추가하겠습니다!


먼저 npm 패키지인 npm install @grapecity/spread-sheetsnpm install @grapecity/spread-sheets-angular를 사용해 SpreadJS를 설치합니다.


그런 다음, 아래와 같이 angular.json에서 SpreadJS CSS를 구성합니다.

{
...
"projects":{
  "spread-sheets-angular-cli":{
  ...
  "architect":{
    ...
    "build":{
      ...
      options:{
        ...
        "styles": [
          "[node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css]"        
        ],
        ...
        }
        ...
      }
      ...
    }
    ...
  }
  }
  ...
}


이제 응용 프로그램에서 SpreadJS를 사용해 보겠습니다.

SpreadJS 모듈을 가져오기 위해 다음과 같이 module.ts를 수정합니다.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SpreadSheetsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}


다음과 같이 SpreadJS 컴포넌트를 보기 위해 component.html을 수정합니다.

<gc-spread-sheets
[backcolor]="spreadBackColor"
[hoststyle]="hostStyle"
(workbookinitialized)="workbookInit($event)"
>
<gc-worksheet [name]="sheetName" [datasource]="data">
<gc-column dataField="Name" width="300"></gc-column>
<gc-column dataField="Category" [width]="columnwidth"></gc-column>
<gc-column
  datafield="Price"
  [width]="columnWidth"
  formatter="$ #.00"
  ></gc-column>
  <gc-column dataField="Shopping Place" [width]="columnwidth"></gc-column>
  </gc-worksheet>
</gc-spread-sheets>


다음과 같이 SpreadJS 컴포넌트에 맞춰 데이터를 준비하기 위해 component.ts를 수정합니다.

import { Component } from "@angular/core";
import * as GC from "@grapecity/spread-sheets";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
spreadBackColor = "aliceblue";
sheetName = "Goods List";
hostStyle = {
  width: "800px",
  height: "600px",
};
data = [
      {
    Name: "Apple",
    Category: "Fruit",
    Price: 1,
    "Shopping Place": "Wal-Mart",
  },
  {
    Name: "Potato",
    Category: "Fruit",
    Price: 2.01,
    "Shopping Place": "Other",
  },
  {
    Name: "Tomato",
    Category: "Vegetable",
    Price: 3.21,
    "Shopping Place": "Other",
  },
  {
    Name: "Sandwich",
    Category: "Food",
    Price: 2,
    "Shopping Place": "Wal-Mart",
  },
  {
    Name: "Hamburger",
    Category: "Food",
    Price: 2,
    "Shopping Place": "Wal-Mart",
  },
  {
    Name: "Grape",
    Category: "Fruit",
    Price: 4,
    "Shopping Place": "Sun Store",
  },
];
columnWidth = 100;
workbookInit(args) {
  let spread: GC.Spread.Sheets.Workbook = args.spread;
  let sheet = spread.getActiveSheet();
  sheet.getCell(0, 0).text("My SpreadJS Angular Project").foreColor("blue");
}
}


ng serve -open을 실행합니다.

브라우저에서 http://localhost:4200/으로 이동하면 다음과 같이 SpreadJS 컴포넌트가 항목 목록과 함께 표시됩니다. SpreadJS 데이터 바인딩 추가


다음과 같은 오류가 표시되는 경우:오류


이러한 오류는 Angular 래퍼 TypeScript 소스 파일을 프로젝트로 복사하고 파일 모듈로 참조하여 수정할 수 있습니다.


다음 단계를 따르시면 됩니다.


1. npm을 설치한 다음, spread.sheets.angular.ts(이 파일만)를 _nodemodules/@grapecity/spread-sheets-angular/dist 폴더에서 src/component/spread-sheets-angular 폴더로 복사합니다.

2. 다음과 같이 module.ts를 수정합니다.
// import { SpreadSheetsModule } from "@grapecity/spread-sheets-angular";
import { SpreadSheetsModule } from "../component/spread-sheets-angular/gc.spread.sheets.angular";


3. ng build –prod를 사용해 다시 빌드합니다.


4. ng serve -open을 실행합니다.



URL의 JSON 데이터로 SpreadJS 데이터 바인딩


먼저 URL을 변수로 저장한 후 URL에서 JSON 데이터를 가져와 URL에서 JSON을 가져오고 응답이 JSON 개체로 반환되게 합니다.

  // 1.) Store URL in a variable
  let api_url = 'https://api.thedogapi.com/v1/breeds';
  // Invoke
  getJSONFromURL();
  // 1.) Create a getJSONFromURL custom function
  async function getJSONFromURL() {
    // 1 - Fetch the JSON data
    const response = await fetch(api_url);
    // 1 - Store JSON data returned from the Fetch in variable
    const api_data = await response.json();
  }


지정된 데이터를 받아들이는 사용자 정의 함수를 만든 다음, 다음과 같이 JSON 데이터를 저장할 변수와 데이터 소스의 각 열에 대한 변수를 만듭니다.

// 2 - Variable to hold JSON data
  var actual_JSON = api_data;
    // 2 - Variables for each column of the data source
    var idColumn = { name: "id", displayName: "ID", size: 70 };
    var nameColumn = { name: "name", displayName: "Name", size: 250 };
    var originColumn = {
      name: "origin",
      displayName: "Origin",
      size: 250,
      };
      var bred_forColumn = {
        name: "bred_for",
        displayName: "Bred for",
        size: 250,
      };
      var breed_groupColumn = {
        name: "breed_group",
        displayName: "Breed Group",
        size: 150,
      };
        var life_spanColumn = {
        name: "life_span",
        displayName: "Life Span",
        size: 150,
      };
        var tempermentColumn = {
        name: "temperament",
        displayName: "Temperament",
        size: 550,
        };


그다음에는 워크시트 setDataSource 메서드를 사용해 데이터 소스를 설정한 다음, bindColumn 메서드를 사용해 열을 지정된 데이터 필드에 바인딩합니다.

  // 3.) Set data source and bind columns to specified data fields
  // 3 - Set data source with setDataSource method
  sheet.setDataSource(actual_JSON);
  // 3 - Specify what data fields to bind to the columns
  sheet.bindColumn(0, idColumn);
  sheet.bindColumn(1, nameColumn);
  sheet.bindColumn(2, originColumn);
  sheet.bindColumn(3, bred_forColumn);
  sheet.bindColumn(4, breed_groupColumn);
  sheet.bindColumn(5, life_spanColumn);
  sheet.bindColumn(6, tempermentColumn);


끝으로 열 개수7로 설정하고 Spread 인스턴스 옵션인 scrollbarMaxAlignTrue로 설정하여 스크롤 막대가 활성 시트의 마지막 행 및 열과 겹치게 하여 추가 회색 공백을 제거합니다.

// 4.) Set the column count to 7 and set the spread instances scrollbar max align to True
// 4 - set the column count with the setColumnCount method
        sheet.setColumnCount(7);
// 4 - set the scrollbar max align to True to remove the additional grey space
        spread.options.scrollbarMaxAlign = true;



SpreadJS 인스턴스는 이 자습서에서 공유하는 코드를 사용해 URL의 데이터가 Angular 프로젝트의 지정된 열에 바인딩되게 합니다.


최종 Json 데이터

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.