데이터 바인딩 기능으로 JavaScript Excel 스프레드시트 템플릿을 만드는 방법
페이지 정보
작성자 GrapeCity 작성일 2021-10-21 13:52 조회 1,581회 댓글 0건본문
관련링크
일반적인 사용 사례 중 하나는 필요한 회사 보고서를 만들기 위해 마스터 템플릿을 만들고 해당 템플릿에 데이터를 바인딩해야 하는 경우입니다. 예를 들어, 의료/환자 기록 양식, 계산서, 재무제표, 예산 등 회사에서 사용하는 표준 템플릿이 있으며, 보고서를 만들기 위해 해당 템플릿에 적절한 데이터를 바인딩해야 합니다.
다행히, SpreadJS에서 기존 Excel 템플릿을 사용하거나 고유한 템플릿을 만들어 이 작업을 간단하게 수행할 수 있습니다. 이 문서에서는 SpreadJS Designer로 템플릿을 만들고, 데이터 소스 스키마를 추가하고, 템플릿을 로드하고, 웹 페이지에 데이터를 추가하는 방법을 설명합니다.
템플릿 만들기
첫 번째 단계는 SpreadJS Designer(설치 프로그램은 Designer>Runtime 폴더에 SpreadJS 다운로드와 함께 포함되어 있음)를 열고 요구 사항에 맞는 디자인을 만드는 것입니다. 이 블로그에서는 이미 생성되어 샘플 다운로드와 함께 포함된 Invoice 템플릿을 사용합니다.
SpreadJS Designer에서 통합 문서를 만든 다음, 셀 스타일과 수식을 설정하고 표와 이미지를 추가하기만 하면 됩니다. Designer는 Excel과 비슷하게 필요한 모든 기능을 제공하므로 간단하고 직관적으로 템플릿을 만들 수 있습니다. 취향에 맞는 디자인을 만든 후에는 해당 템플릿에 데이터 소스 스키마를 추가할 수 있습니다.
데이터 소스 스키마 추가
SpreadJS Designer는 템플릿에 데이터 소스 바인딩을 직접 추가하는 기능을 제공합니다. 이 사례에서는 데이터 소스에 있는 필드에 대한 아이디어가 이미 있습니다.
Customer
Name
Company
Address 1
Address 2
Company
Name
Address 1
Address 2
Number
Date
이 스키마를 추가하려면 데이터 탭을 열고 "템플릿" 버튼을 클릭하여 템플릿을 엽니다.
템플릿에 데이터 노드를 추가하려면 "소스" 텍스트를 마우스로 가리키고 노드를 추가합니다.
이제 필드 목록에서 데이터 항목을 클릭하여 통합 문서의 셀로 끌어올 수 있습니다. 이렇게 하면 데이터 필드가 셀에 "[필드 이름]"으로 표시됩니다. 이상으로, 미리 정의된 데이터 스키마가 포함된 템플릿을 만드는 데 필요한 작업을 마쳤습니다. 이 내용을 SSJSON에 저장하고 SpreadJS Designer에서 JS로 내보냅니다.
데이터 및 셀 바인딩 소스 만들기
템플릿의 JS 파일을 만든 후에는 파일을 가져오기 위해 코드를 작성할 수 있습니다. 이 사례에서는 SpreadJS 라이브러리, 라이선스가 있는 별도의 JS 파일, 만든 템플릿의 JS 파일("billingInvoice.js"), JS 코드를 포함할 별도의 파일을 참조하려고 합니다. SpreadJS 인스턴스를 호스트할 DIV 요소도 만들 수 있습니다.
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="license.js" type="text/javascript"></script> <script src="billingInvoice.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </head> <body style="height:100%"> <div id="ss" style="width:100%;height:75%"></div> </body> </html>
또한 데이터 파일을 약간 편집해야 합니다. 이 사례에서는 변수 이름을 "data"로 바꾸고 실제 JSON 주위에 대괄호를 추가하려고 합니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { var sd = data; if (sd.length > 0) { if (!spread) { return; } function Company(name, address1, address2) { this.name = name; this.address1 = address1; this.address2 = address2; } function Customer(name, company, address1, address2) { this.name = name; this.company = company; this.address1 = address1; this.address2 = address2; } function Record(quantity, details, unitPrice) { this.quantity = quantity; this.details = details; this.unitPrice = unitPrice; } function Invoice(customer, company, number, date, records) { this.customer = customer; this.company = company; this.number = number; this.date = date; this.records = records; } } }
함수가 설정된 후에는 실제 데이터를 만들어 일부 변수에 설정할 수 있습니다.
var customer = new Customer("KIM ABERCROMBIE", "Fabrikam, Inc.", "1234 First Street", "Forest, OR 12345"), company = new Company("ADVENTURE WORKS", "23456 Maple Street", "Orange Grove, CA 09876"), records = [new Record(2, "Widgets", 14.95), new Record(5, "Washers", 9.95)], invoice = new Invoice(customer, company, "0005", "26 August 2021", records);
데이터가 포함되는 주요 변수는 Invoice이므로, SpreadJS Designer에서 앞서 정의한 데이터 스키마에 데이터를 연결할 CellBindingSource로 해당 변수를 사용합니다.
var dataSource = new GC.Spread.Sheets.Bindings.CellBindingSource(invoice);
바인딩 경로 설정
데이터 소스가 완전히 설정되고 나면 시트의 데이터 소스로 설정하고 표에 있는 필드의 바인딩 경로를 설정할 수 있습니다.
spread.suspendPaint(); // Set binding paths spread.fromJSON(sd[0]); var sheet = spread.getSheet(0); sheet.setDataSource(dataSource); var table = sheet.tables.findByName("InvoiceDetails"); table.autoGenerateColumns(false); var tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn(); tableColumn1.name("Quantity"); tableColumn1.dataField("quantity"); var tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn(); tableColumn2.name("Details"); tableColumn2.dataField("details"); var tableColumn3 = new GC.Spread.Sheets.Tables.TableColumn(); tableColumn3.name("Unit Price"); tableColumn3.dataField("unitPrice"); table.bindColumns([tableColumn1, tableColumn2, tableColumn3]); table.bindingPath("records"); spread.resumePaint();
이상으로, SpreadJS에서 데이터 바인딩이 있는 템플릿을 만드는 데 필요한 작업이 완료되었습니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.