SpreadJS와 Angular 데이터 바인딩
페이지 정보
작성자 GrapeCity
작성일 2021-04-09 11:08 조회 2,582회
댓글 0건
본문
관련링크
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 프로젝트의 지정된 열에 바인딩되게 합니다.
댓글목록
등록된 댓글이 없습니다.
