기초가이드 SpreadJS와 Angular 데이터 바인딩
페이지 정보
작성자 GrapeCity
본문
관련링크
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-sheets 및 npm 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 컴포넌트가 항목 목록과 함께 표시됩니다.
다음과 같은 오류가 표시되는 경우:
이러한 오류는 Angular 래퍼 TypeScript 소스 파일을 프로젝트로 복사하고 파일 모듈로 참조하여 수정할 수 있습니다.
다음 단계를 따르시면 됩니다.
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, };
그다음에는 워크시트 를 사용해 데이터 소스를 설정한 다음, 를 사용해 열을 지정된 데이터 필드에 바인딩합니다.
// 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 인스턴스 옵션인 을 True로 설정하여 스크롤 막대가 활성 시트의 마지막 행 및 열과 겹치게 하여 추가 회색 공백을 제거합니다.
// 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 프로젝트의 지정된 열에 바인딩되게 합니다.
댓글목록
등록된 댓글이 없습니다.