[]
필요한 기능만 사용하려면 SpreadJS의 서브 라이브러리만 로드하여 전체 라이브러리를 로드하지 않고도 사용할 수 있습니다.
기능 | 필수 라이브러리 |
---|---|
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 (optional, for formulas and filters) gc.spread.sheets.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.bindings.*.*.*.min.js (optional, for data-binding) gc.spread.sheets.conditionalformatting.*.*.*.min.js (optional, for filtering) gc.spread.sheets.filter.*.*.*.min.js (optional, for filtering) gc.spread.sheets.tables.*.*.*.min.js |
Chart | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.bindings.*.*.*.min.js (for data-binding) 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 (for data-binding) |
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 |
corejs
파일은 항상 로드되어야 합니다. 기능을 사용하려면 calcengine js
파일을 먼저 로드해야 합니다. 많은 기능들이 calcengine js
를 사용하므로, 이를 먼저 로드하는 것이 좋습니다. 로드되지 않은 js
파일의 함수는 작동하지 않습니다.
js
파일은 SpreadJS 스크립트 폴더 아래의 플러그인(plugins) 폴더에 위치합니다.
다음 코드 샘플은 기본 SpreadJS 기능을 사용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS 플러그인 공통 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 핵심 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
<script>
// Spread 정의와 대부분의 UI 동작은 SpreadJS 핵심 라이브러리에 포함되어 있습니다.
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>
다음 코드 샘플은 Spread 워크시트에서 기본 Calc 함수 사용 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS 플러그인 공통 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 CalcEngine 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 CalcEngine 기본 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 핵심 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/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>
다음 코드 예제는 calc와 고급 함수를 사용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS 플러그인 공용 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 CalcEngine 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 CalcEngine 고급 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 코어 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/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 Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS 플러그인 공용 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 코어 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 데이터 바인딩 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/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 Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS 플러그인 공용 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 CalcEngine 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 코어 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 수식 텍스트 박스 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.formulatextbox.x.x.x.min.js"></script>
<script>
// 수식 텍스트 박스 함수는 Spread 수식 텍스트 박스 라이브러리에 있습니다.
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 Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS 플러그인 공용 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 코어 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 메모 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/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 Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS 플러그인 공용 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 코어 함수 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS 플러그인 움직이는 개체 기능 라이브러리-->
<script type="text/javascript" src="./scripts/pluggable/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>