제품설치 및 실행 SpreadJS 모듈화 라이브러리 사용법
페이지 정보
작성자 GCK루카스
작성일 2023-09-08 15:50 조회 169회
댓글 0건
본문
관련링크
SpreadJS는 여러가지 엑셀의 기능을 지원하고 있으며, 각 기능을 포함하는 다양한 라이브러리를 제공합니다.
만약 SpreadJS의 모든 기능을 사용하지 않는다면 필요한 모듈화된 일부 라이브러리만 로드하여 라이브러리 로드 시간을 줄일 수 있습니다.
아래 표를 참고하여 필요한 기능에 대한 라이브러리를 확인해 보시기 바랍니다.
⚠️ 해당 글의 내용은 SpreadJS만 단독으로 사용할 때 적용되는 내용입니다.
디자이너 컴포넌트는 모든 라이브러리의 기능을 사용하는 것을 기준으로 개발된 제품이므로,
디자이너 컴포넌트를 함께 사용할 때는 해당 글의 내용이 적용되지 않습니다.
core js 파일은 필수 라이브러리입니다.
모듈화된 라이브러리를 사용하려면 필수적으로 항상 로드되어 있어야 합니다.
또한, 함수를 사용하려면 calcengine js가 먼저 로드되어야 합니다.
calcengine js 파일이 로드되지 않고 함수를 사용하면 함수가 적용되지 않습니다.
js 파일들은 SpreadJS scripts 폴더 아래의 modules 폴더에 있습니다.
기능 |
필요 라이브러리 |
Core |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js |
Calc Engine |
gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js |
Basic Functions |
gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.calcengine.basicfunctions.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js |
Advanced Functions |
gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.calcengine.advancedfunctions.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js |
Auto Merge |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.automerge.*.*.*.min.js |
Data Binding |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.bindings.*.*.*.min.js |
Drag Fill |
gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.fill.*.*.*.min.js |
Filter |
gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.conditionalformatting.*.*.*.min.js gc.spread.sheets.filter.*.*.*.min.js |
Formula Textbox |
gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.formulatextbox.*.*.*.min.js |
Floating Object |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.floatingobjects.*.*.*.min.js |
Outlines |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.outlines.*.*.*.min.js |
Touch |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.touch.*.*.*.min.js |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.print.*.*.*.min.js |
|
Cell Types |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.celltypes.*.*.*.min.js |
Cell States |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.cellstate.*.*.*.min.js |
Comment |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.comments.*.*.*.min.js |
Conditional Formatting |
gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.conditionalformatting.*.*.*.min.js |
Data Validation |
gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.conditionalformatting.*.*.*.min.js gc.spread.sheets.datavalidation.*.*.*.min.js |
Search |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.search.*.*.*.min.js |
Sparkline | gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.calcengine.basicfunctions.*.*.*.min.js gc.spread.calcengine.advancedfunctions.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.sparklines.*.*.*.min.js |
Table | gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js (수식, 필터 필요시) gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.bindings.*.*.*.min.js (데이터 바인딩 필요시) gc.spread.sheets.conditionalformatting.*.*.*.min.js (필터링 필요시) gc.spread.sheets.filter.*.*.*.min.js (필터링 필요시) gc.spread.sheets.tables.*.*.*.min.js |
Chart | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.bindings.*.*.*.min.js (데이터 바인딩 필요시) gc.spread.sheets.charts.*.*.*.min.js |
TableSheet | gc.spread.common.*.*.*.js gc.spread.calcengine.*.*.*.js gc.data.*.*.*.js gc.spread.sheets.core.*.*.*.js gc.spread.sheets.calcengine.*.*.*.js gc.spread.sheets.bindings.*.*.*.js gc.spread.sheets.tables.*.*.*.js gc.spread.sheets.automerge.*.*.*.js gc.spread.sheets.cellstate.*.*.*.js gc.spread.sheets.statusbar.*.*.*.js gc.spread.sheets.conditionalformatting.*.*.*.js gc.spread.sheets.filter.*.*.*.js gc.spread.sheets.tablesheet.*.*.*.js |
Drag Merge | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.dragmerge.*.*.*.min.js |
Outline Column | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.outlinecolumn.*.*.*.min.js |
Context Menu | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.contextmenu.*.*.*.min.js gc.spread.sheets.bindings.*.*.*.min.js (데이터 바인딩 필요시) |
gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.pdf.*.*.*.min.js | |
Slicer Component | gc.spread.common.*.*.*.min.js |
Slicer | gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.conditionalformatting.*.*.*.min.js gc.spread.sheets.filter.*.*.*.min.js gc.spread.sheets.tables.*.*.*.min.js gc.spread.sheets.floatingobjects.*.*.*.min.js gc.spread.sheets.slicers.*.*.*.min.js |
Barcode | gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.sparklines.*.*.*.min.js gc.spread.sheets.barcode.*.*.*.min.js |
Shapes | gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.floatingobjects.*.*.*.min.js gc.spread.sheets.shapes.*.*.*.min.js |
Hyperlink | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.hyperlink.*.*.*.js |
NameBox | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.namebo*.*.*.x.js |
Statusbar | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.statusbar.*.*.*.js |
기본 SpreadJS 함수 사용
다음 샘플 코드는 기본 SpreadJS 함수를 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Modules Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS modules common function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS modules core function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.x.x.x.min.js"></script>
<script>
// The Spread definition and most UI behavior is in the SpreadJS core library.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
sheet.setValue(0, 0, 20);
};
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>기본 계산 함수 사용
다음 샘플 코드는 기본 계산 함수를 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Modules Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS modules common function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS modules calcengine function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.x.x.x.min.js"></script>
<!--SpreadJS modules calcengine basic function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.basicfunctions.x.x.x.min.js"></script>
<!--SpreadJS modules core function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.x.x.x.min.js"></script>
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
sheet.setArray(0, 0, [1, 2, 3, 4, 5]);
sheet.setFormula(5, 1, 'SUM(A1,A5)');
};
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>계산 및 고급 기능 사용
다음 샘플 코드는 계산 및 고급 기능을 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Modules Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS modules common function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS modules calcengine function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.x.x.x.min.js"></script>
<!--SpreadJS modules calcengine advanced function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.advancedfunctions.x.x.x.min.js"></script>
<!--SpreadJS modules core function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.x.x.x.min.js"></script>
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();
activeSheet.setValue(0, 0, 1);
activeSheet.setValue(1, 0, 10);
activeSheet.setValue(2, 0, 7);
activeSheet.setValue(3, 0, 9);
activeSheet.setValue(4, 0, "a1");
activeSheet.setFormula(5, 0, "MAX(A1:A5)");
};
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>바인딩 기능 사용
다음 샘플 코드는 바인딩 기능을 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Modules Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS modules common function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS modules core function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS modules data binding library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.bindings.x.x.x.min.js"></script>
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();
var people = [
{ name: "Albert", isAdult: false, country: "American", website: "albert.com" },
{ name: "Alice", isAdult: true, country: "China", website: "alice.com" },
{ name: "Bob", isAdult: false, country: "Canada", website: "bob.com" }
];
activeSheet.autoGenerateColumns = true;
activeSheet.setDataSource(people);
};
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>수식 텍스트 상자 사용
다음 샘플 코드는 수식 텍스트 상자를 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Modules Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS modules common function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS modules calcengine function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.calcengine.x.x.x.min.js"></script>
<!--SpreadJS modules core function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS modules formula text box function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.formulatextbox.x.x.x.min.js"></script>
<script>
// The formula text box function is in the Spread formula tex box library.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
sheet.setArray(0, 0, [1, 2, 3, 4, 5]);
var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("formulaTextBox"));
fbx.workbook(spread);
};
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
<input type="text" id="formulaTextBox" />
</body>
</html>메모 기능 사용
다음 샘플 코드는 메모 기능을 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Modules Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS modules common function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS modules core function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS modules comment library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.comments.x.x.x.min.js"></script>
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();
var comment = new GC.Spread.Sheets.Comments.Comment();
comment.text("new comment!");
comment.backColor("yellow");
comment.foreColor("green");
comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.alwaysShown);
activeSheet.getCell(5,5).comment(comment);
};
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
<input type="text" id="formulaTextBox" />
</body>
</html>움직이는 개체 기능 사용
다음 샘플 코드는 움직이는 개체 기능을 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Modules Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS modules common function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS modules core function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS modules floating objects function library-->
<script type="text/javascript" src="./scripts/modules/gc.spread.sheets.floatingobjects.x.x.x.min.js"></script>
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 100, 100, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
};
</script>
</head>
<body>
<div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
<input type="text" id="formulaTextBox" />
</body>
</html>이외에도 궁금하신 내용이 있는 경우, 에 문의 남겨 주시길 바랍니다.
감사합니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
