[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

SpreadJS 라이브러리

필요한 기능만 사용하려면 SpreadJS의 서브 라이브러리만 로드하여 전체 라이브러리를 로드하지 않고도 사용할 수 있습니다.

Features

Required Libraries

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.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

Basic Functions

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.calcengine.basicfunctions.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

Advanced Functions

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.calcengine.advancedfunctions.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.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.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.fill.*.*.*.min.js

Filter

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.filter.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

gc.spread.sheets.outlines.*.*.*.min.js

gc.spread.sheets.outlinecolumn.*.*.*.min.js

Formula Textbox

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.calcengine.advancedfunctions.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.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

Print

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.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.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

Data Validation

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.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.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.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.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.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.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

gc.spread.sheets.charts.*.*.*.min.js

TableSheet

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.data.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

gc.spread.sheets.tables.*.*.*.min.js

gc.spread.sheets.automerge.*.*.*.min.js

gc.spread.sheets.cellstate.*.*.*.min.js

gc.spread.sheets.statusbar.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.filter.*.*.*.min.js

gc.spread.sheets.tablesheet.*.*.*.min.js

GanttSheet

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.data.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

gc.spread.sheets.tables.*.*.*.min.js

gc.spread.sheets.automerge.*.*.*.min.js

gc.spread.sheets.cellstate.*.*.*.min.js

gc.spread.sheets.statusbar.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.filter.*.*.*.min.js

gc.spread.sheets.contextmenu.*.*.*.min.js

gc.spread.sheets.outlines.*.*.*.min.js

gc.spread.sheets.outlinecolumn.*.*.*.min.js

gc.spread.sheets.tablesheet.*.*.*.min.js

gc.spread.sheets.ganttsheet.*.*.*.min.js

ReportSheet

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.data.*.*.*.min.js

gc.spread.calcengine.basicfunctions.*.*.*.min.js

gc.spread.calcengine.advancedfunctions.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.tables.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

gc.spread.sheets.components.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.sparklines.*.*.*.min.js

gc.spread.sheets.statusbar.*.*.*.min.js

gc.spread.sheets.cellstate.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.datavalidation.*.*.*.min.js

gc.spread.sheets.filter.*.*.*.min.js

gc.spread.sheets.contextmenu.*.*.*.min.js

gc.spread.sheets.print.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

gc.spread.sheets.charts.*.*.*.min.js

gc.spread.sheets.datacharts.*.*.*.min.js

gc.spread.sheets.tablesheet.*.*.*.min.js

gc.spread.report.reportsheet.*.*.*.min.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.outlines.*.*.*.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

PDF

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.print.*.*.*.min.js

gc.spread.sheets.pdf.*.*.*.min.js

Slicer

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.tables.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

gc.spread.sheets.slicers.*.*.*.min.js

Barcode

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.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.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

Hyperlink

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.outlines.*.*.*.min.js

gc.spread.sheets.outlinecolumn.*.*.*.min.js

gc.spread.sheets.hyperlink.*.*.*.min.js

NameBox

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.namebox*.*.*.min.js

Statusbar

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.statusbar.*.*.*.js

corejs 파일은 항상 로드되어야 합니다. 기능을 사용하려면 calcengine js 파일을 먼저 로드해야 합니다. 많은 기능들이 calcengine js를 사용하므로, 이를 먼저 로드하는 것이 좋습니다. 로드되지 않은 js 파일의 함수는 작동하지 않습니다.

js 파일은 SpreadJS 스크립트 폴더 아래의 플러그인(plugins) 폴더에 위치합니다.

기본 SpreadJS 기능 사용하기

다음 코드 샘플은 기본 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>

기본 Calc 함수 사용하기

다음 코드 샘플은 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>
    <!--SpreadJS 플러그인 계산 엔진 시트 함수 라이브러리-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.calcengine.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 및 고급 함수 사용하기

다음 코드 예제는 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>
    <!--SpreadJS 플러그인 계산 엔진 시트 함수 라이브러리-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.calcengine.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 플러그인 계산 함수 라이브러리-->
    <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.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>
    <!--SpreadJS 플러그인 계산 엔진 시트 함수 라이브러리-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.calcengine.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>
        // The formula text box function is in the Spread formula tex box library. 
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook("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("ss");
            var sheet = spread.getActiveSheet();
            sheet.comments.add(5, 5, 'new comment!');
        };
    </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.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>
</body>
</html>