디자이너컴포넌트 SpreadJS 디자이너 컴포넌트 - 빠른 시작
페이지 정보
작성자 GrapeCity
본문
관련링크
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
<!-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>
위의 코드를 실행하면, 아래와 같은 결과를 확인 할 수 있습니다.
이제 SpreadJS 디자이너 컴포넌트를 사용하시어, 쉽고 빠르게 구글시트, MS 365 엑셀과 같은 에디터를 여러분의 솔루션에 쉽게 코드 몇 줄 만으로 구현할 수 있습니다.
자세한 내용은 아래의 링크를 통해서 확인이 가능합니다.
즐거운 코딩되세요~~!!
댓글목록
등록된 댓글이 없습니다.