SpreadJS Javascript 컴포넌트 시작하기
2~3줄의 코드만 사용하면 엔터프라이즈 응용 프로그램에 Excel과 같은 JavaScript 스프레드시트를 포함할 수 있습니다. 아래에서는 JavaScript 애플리케이션을 만들고 SpreadJS를 초기화하기 위한 지침을 찾을 수 있습니다.
단계
- JavaScript 응용 프로그램 만들기 - SpreadJS는 종속성이 없습니다. gc.spread.sheets.xx.x.x.css, gc.spread.sheets.all.xx.x.x.min.js 파일이 필요합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="gc.spread.sheets.all.xx.x.x.min.js"> <link rel="stylesheet" href="gc.spread.sheets.xx.x.x.css"type="text/css"/> </head> <body></body> </html> - SpreadJS 호스트 요소 추가 - 페이지 본문에 DOM 요소를 컨테이너로 포함합니다.
<div id="ss"></div> - JavaScript SpreadJS 컴포넌트 초기화 - Spread 컴포넌트는 새 GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 })으로 초기화됩니다.
window.onload = function () { // spread 초기화 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); // spread 얻기 // var spread = GC.Spread.Sheets.findControl(document.getElementById('ss')); };
한국어 설정하기
단계
- 상단에 한국어 리소스 파일을 가져오는 코드를 추가합니다.
<script src="./scripts/resources/ko/gc.spread.sheets.resources.ko.14.x.x.min.js" type="text/javascript"></script> - window.onload 함수에 아래의 코드를 입력합니다.
GC.Spread.Common.CultureManager.culture("ko-kr");
값 및 수식 설정
단계
- setValue 메소드를 사용하여 셀의 값을 설정하고 setFormula를 사용하여 계산합니다.
var sheet = spread.getSheet(0); //값 설정하기 - Text sheet.setValue(1, 1, "값 설정하기"); //값 설정하기 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다. sheet.setValue(2, 1, "Number"); sheet.setValue(2, 2, 23); //값 설정하기 - Text : B4에 "Text" 라는 텍스트를, C4에 "GrapeCity"라는 텍스트를 삽입합니다. sheet.setValue(3, 1, "Text"); sheet.setValue(3, 2, "GrapeCity"); sheet.setValue(4, 1, "Datetime"); //값 설정하기 - DateTime : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다. sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd"); //함수 설정하기, C3 셀과 20 더하기 sheet.setFormula(0, 0, '=SUM(C2,20)');
스타일 설정
SpreadJS에서 제공하는 함수를 사용하면 데이터의 모양을 보다 유용하고 매력적으로 바꿀 수 있습니다.
단계
- 이 단계에서 더 매력적으로 만들기 위해 시트의 스타일을 설정합니다.
//값 설정하기 - Text sheet.setValue(1, 1, "값 설정하기"); //값 설정하기 - Number : B3에 "Number" 라는 텍스트를, C3에 23이라는 숫자를 삽입합니다. sheet.setValue(2, 1, "Number"); sheet.setValue(2, 2, 23) //값 설정하기 - Text : B4에 "Text" 라는 텍스트를, C4에 "GrapeCity"라는 텍스트를 삽입합니다. sheet.setValue(3, 1, "Text"); sheet.setValue(3, 2, "GrapeCity") sheet.setValue(4, 1, "Datetime"); //값 설정하기 - DateTime : B5에 "Datetime" 이라는 텍스트를, C5에 오늘 날짜를 삽입합니다. sheet.getCell(4, 2).value(new Date()).formatter("yyyy-mm-dd"); // 스타일 설정하기 // B열, C열의 너비를 200으로 설정합니다. sheet.setColumnWidth(1, 200); sheet.setColumnWidth(2, 200); // B2:C2의 배경색과 글자색을 설정합니다. sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)"); // B4:C4의 배경색을 설정합니다. sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)"); // B2:C2의 셀을 병합합니다. sheet.addSpan(1, 1, 1, 2); // 각 범위에 테두리를 설정합니다. sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), { all: true }); sheet.getRange(2, 1, 3, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), { inside: true }); // B2:C2의 병합된 셀에 수직 가운데 정렬을 설정합니다. sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
데이터 바인딩
간단하면서도 효율적으로 데이터를 바인딩하는 방법에 대해 설명합니다.
initWorkbook 함수 내부에 이어서 작성합니다.
단계
- addSheet 메서드를 사용하여 새로운 시트를 추가합니다.
spread.addSheet(1); - getSheet 메서드를 사용하여 추가한 시트를 가져옵니다.
var sheet2 = spread.getSheet(1); - person이라는 데이터를 입력해 줍니다.
var person = { name: '홍길동', age: 25, gender: '남', address: { postcode: '10001' } }; - "new GC.Spread.Sheets.Bindings.CellBindingSource(person);"를 사용하여 셀 바인딩 소스를 설정합니다.
var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person); - 그런 다음 setBindingPath 메서드를 사용하여 지정된 시트 영역에 지정된 셀의 바인딩 경로를 설정합니다.
var sheet = spread.getSheet(0); var person = { name: '홍길동', age: 25, gender: '남', address: { postcode: '10001' } }; var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person); sheet.setBindingPath(2, 2, 'name'); sheet.setBindingPath(3, 2, 'age'); sheet.setBindingPath(4, 2, 'gender'); sheet.setBindingPath(5, 2, 'address.postcode'); sheet.setDataSource(source);