데이터 바인딩 기능으로 JavaScript Excel 스프레드시트 템플릿을 만드는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-10-21 13:52 조회 1,555회 댓글 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

이 스키마를 추가하려면 데이터 탭을 열고 "템플릿" 버튼을 클릭하여 템플릿을 엽니다.

spreadjs

템플릿에 데이터 노드를 추가하려면 "소스" 텍스트를 마우스로 가리키고 노드를 추가합니다.

이제 필드 목록에서 데이터 항목을 클릭하여 통합 문서의 셀로 끌어올 수 있습니다. 이렇게 하면 데이터 필드가 셀에 "[필드 이름]"으로 표시됩니다. 이상으로, 미리 정의된 데이터 스키마가 포함된 템플릿을 만드는 데 필요한 작업을 마쳤습니다. 이 내용을 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();

invoice