SpreadJS 디자이너 컴포넌트 - 빠른 시작 > 온라인 스터디

디자이너컴포넌트 SpreadJS 디자이너 컴포넌트 - 빠른 시작

추천0

페이지 정보

작성자 MESCIUS

작성일 2021-02-01 13:42 조회 3,347회 댓글 0건

본문

관련링크

SpreadJS V14가 출시되면서, 여러분 더욱 쉽고 편하게 여러분의 응용프로그램에 Excel(엑셀) 에디터를 가져가 사용하실 수 있도록, SpreadJS 디자이너 컴포넌트(구 디자이너 소스코드)를 출시였습니다.

이제 SpreadJS는 스프레드시트 컴포넌트 외에도 웹 응용 프로그램에 포함할 수 있는 Excel 디자이너(에디터) 컴포넌트를 제공합니다.

해당 컴포넌트는 기존에 엑셀에서 하는 작업과 동일한 방식으로 스프레드시트를 쉽게 수정 및 편집할 수 있는 UI, 기능 그리고 유연성을 제공합니다.

디자이너 컴포넌트에는 리본 메뉴, 수식 표시줄, 상태 표시줄, 측면 패널 및 컨텍스트 메뉴가 포함됩니다. 또한, 해당 컴포넌트는 각 프레임워크 래퍼를 사용하여 React, Angular 또는 Vue 프레임 워크에도 쉽게 적용할 수도 있습니다.

SpreadJS 디자이너 컴포넌트의 기본 제공 대화 상자와 옵션을 사용하여 하이퍼링크의 링크 색상, 셀 패딩, 스프레드시트 설정 등과 같은 세부 정보를 정의 할 수 있습니다.

또한, 새 단추 또는 탭을 추가하거나 기존 컴포넌트를 사용자 정의하여 디자이너 컴포넌트를 커스터마이징할 수도 있습니다.

데모 및 코드 확인 하기: https://codepen.io/GrapeCity-Korea/pen/poEEEEX

디자이너 컴포넌트를 SpreadJS 라이브러리와 통합

프로젝트에서 다음 SpreadJS CSS 및 JS 파일을 참조하십시오.

디자이너 컴포넌트를 사용하기 위해서, 반드시 SpreadJS의 기본 라이브러리를 먼저 정의해주어야 합니다.

JS 파일경로: SpreadJS.Release.14.0.3\SpreadJS\scripts\
CSS 파일경로: SpreadJS.Release.14.0.3\SpreadJS\css

[HTML header 섹션]

  <!-CSS 파일->  
    < link rel = "styleSheet" href = "css / gc.spread.sheets.0.0.0.css" />

    <!-스크립트 파일->
    <!-파일 경로: SpreadJS.Release.0.0.0\SpreadJS\scripts\->
    <script src = "scripts/gc.spread.sheets.all.0.0.0.min.js" > </ script >

    <!-파일 경로: SpreadJS.Release.0.0.0\SpreadJS\scripts\plugins ->
    <script src = "scripts/gc.spread.sheets.charts.0.0.0.min.js"></script>
    <script src = "scripts/gc.spread.sheets.shapes.0.0.0.min.js" type="text/javascript"></script>
    <script src = "scripts/gc.spread.sheets.print.0.0.0.min.js" type="text/javascript"></script>
    <script src = "scripts/gc.spread.sheets.barcode.0.0.0.min.js" type="text/javascript"></script>
    <script src = "scripts/gc.spread.sheets.pdf.0.0.0.min.js" type="text/javascript"></script>

    <!-파일 경로: SpreadJS.Release.0.0.0\SpreadJS\scripts\interop ->
    <script src="scripts/gc.spread.excelio.0.0.0.min.js" type="text/javascript"></script>

프로젝트에서 다음 디자이너 컴포넌트의 CSS 및 JS 파일을 참조하십시오.

JS 파일경로: SpreadJS.Release.xx.x.x\Designer\Designer Component\scripts

CSS 파일경로: SpreadJS.Release.14.0.3\Designer\Designer Component\css

[HTML header 섹션]

   <!-CSS 파일: SpreadJS.Release.0.0.0\Designer\Designer Component\css->  
    <link rel = "styleSheet" href = "css/gc.spread.sheets.designer.0.0.0.min.css"/>
   
    <!-스크립트 파일: SpreadJS.Release.0.0.0\Designer\Designer Component\scripts->
    <script src = "scripts/gc.spread.sheets.designer.resource.ko.0.0.0.min.js" type="text/javascript"></script>
    <script src = "scripts/gc.spread.sheets.designer.all.0.0.0.min.js" type="text/javascript"></script>

페이지 Body에 컨테이너로 DOM 요소를 포함합니다.

[HTML body 섹션]

  <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>

디자이너 컴포넌트를 초기화합니다.
또한 배포 전에는 반드시 디자이너 컴포넌트와 SpreadJS에 대한 라이선스 키를 아래 주석과 같이 설정하십시오. (또는 js파일로 만들어서 불러오십시오)
[HTML body 섹션]
```
//Set License Key
//GC.Spread.Sheets.Designer.LicenseKey = "XXX";
//GC.Spread.Sheets.LicenseKey = "XXXX";

var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
```

위 과정에 대한 전체에 대한 코드는 아래와 같습니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

  <!--CSS files-->
  <link rel="styleSheet" href="css/gc.spread.sheets.0.0.0.css" />
  <link rel="styleSheet" href="css/gc.spread.sheets.designer.0.0.0.min.css" />

  <!--Script files-->
  <script src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
  <script src="scripts/gc.spread.sheets.charts.0.0.0.min.js"></script>
  <script src="scripts/gc.spread.sheets.shapes.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.print.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.barcode.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.pdf.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.excelio.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.designer.resource.en.0.0.0.min.js " type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.designer.all.0.0.0.min.js" type="text/javascript"></script>

  <script>
      window.onload = function () {

          //Set License Key
          //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
          //GC.Spread.Sheets.LicenseKey = "XXXX";

          var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
      }
  </script>
</head>
<body>
  <!--DOM element-->
  <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
</body>

실행을 하면, 아래와 같이 SpreadJS 디자이너 컴포넌트가 여러분이 원하는 영역에 구현된 것을 볼 수 있습니다.

특정 스프레드시트를 디자이너 컴포넌트에 적용하기

이번 섹션에서는 디자이너 컴포넌트에 사용자가 미리 정의한 스프레드시트를 적용하는 방법을 공유드리고자 합니다.

위의 1번과 2번 과정을 하신 후에, 아래의 과정을 추가해주시면 됩니다.

3 단계 : 디자이너 컴포넌트의 DOM 요소와 함께 SpreadJS 시트 DOM 요소를 포함합니다.
4 단계 : 스프레드시트를 초기화하고, 원하는 작업에 대한 코드를 추가합니다. 디자이너 컴포넌트를 초기화하는 동안 스프레드시트의 변수를 매개변수로 전달합니다.

즉, 일반적으로 SpreadJS로 작업하시는 것 처럼 시트를 정의하고, 해당 시트를 디자이너 컴포넌트에 넘김으로서 쉽고 빠르게 디자이너 안에 보여주고자 하는 데이터를 불러오실 수 있습니다.

HTML 파일의 전체 코드는 지정된 스프레드시트 상에 일부 데이터를 추가하고 트리 맵 차트를 생성합니다. 해당 스프레드시트는 디자이너 컴포넌트의 UI를 통해, Excel과 같이 편집작업을 할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
   
  <!--CSS files-->
  <link rel="styleSheet" href="css/gc.spread.sheets.0.0.0.css" />
  <link rel="styleSheet" href="css/gc.spread.sheets.designer.0.0.0.min.css" />

  <!--Script files-->
  <script src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
  <script src="scripts/gc.spread.sheets.charts.0.0.0.min.js"></script>
  <script src="scripts/gc.spread.sheets.shapes.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.print.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.barcode.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.pdf.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.excelio.0.0.0.min.js" type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.designer.resource.en.0.0.0.min.js " type="text/javascript"></script>
  <script src="scripts/gc.spread.sheets.designer.all.0.0.0.min.js" type="text/javascript"></script>

  <script>
      $(document).ready(function () {
          // initialize Spread
          var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
          // Get the activesheet
          var sheet = spread.getSheet(0);
          // Set Column Width
          sheet.setColumnWidth(2, 100);
          sheet.setColumnWidth(4, 100);
          // Create Data Array
          var dataArray =
              [
                  ['Region', 'Subregion', 'country', 'Population'],
                  ['Asia', 'Southern', 'India', 1354051854],
                  [, , 'Pakistan', 200813818],
                  [, , 'Bangladesh', 166368149],
                  [, , 'Others', 170220300],
                  [, 'Eastern', 'China', 1415045928],
                  [, , 'Japan', 127185332],
                  [, , 'Others', 111652273],
                  [, 'South-Eastern', , 655636576],
                  [, 'Western', , 272298399],
                  [, 'Central', , 71860465],
                  ['Africa', 'Eastern', , 433643132],
                  [, 'Western', , 381980688],
                  [, 'Northern', , 237784677],
                  [, 'Others', , 234512021],
                  ['Europe', , , 742648010],
                  ['Others', , , 1057117703]
              ];
          // Set Array
          sheet.setArray(1, 1, dataArray);
          var treemapChart = sheet.charts.add('chart1',
          GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
           
          // Initialize designer with default configuration and above created spread component
          var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);

      });
  </script>
</head>
<body>
  <div id="ss" style="width:800px; height:1000px;"></div>
  <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
</body>
</html>

위의 코드를 실행하면, 아래와 같은 결과를 확인 할 수 있습니다.