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

본문 바로가기

SpreadJS

온라인 스터디

기초가이드 SpreadJS 디자이너 컴포넌트 - 빠른 시작

페이지 정보

작성자 GrapeCity 작성일 21-02-01 13:42 조회 652회 댓글 0건

본문

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


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


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


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


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


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


 


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

  1. 프로젝트에서 다음 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>

  2. 프로젝트에서 다음 디자이너 컴포넌트의 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>

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

[HTML body 섹션]

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

  1. 디자이너 컴포넌트를 초기화합니다.

    또한 배포 전에는 반드시 디자이너 컴포넌트와 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 디자이너 컴포넌스가 여러분이 원한는 영역에 구현된 것을 볼 수 있습니다.


img



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


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


위의 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>


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

img


이제 SpreadJS 디자이너 컴포넌트를 사용하시어, 쉽고 빠르게 구글시트, MS 365 엑셀과 같은 에디터를 여러분의 솔루션에 쉽게 코드 몇 줄 만으로 구현할 수 있습니다.


자세한 내용은 아래의 링크를 통해서 확인이 가능합니다.


즐거운 코딩되세요~~!!



  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.