[]
        
(Showing Draft Content)

SpreadJS Libraries

You can load SpreadJS sub-libraries to use certain features without loading all the libraries.

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.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

Print

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)

PDF

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

The core js must always be loaded. The calcengine js must be loaded first to use functions. Many features use the calcengine js so you may wish to load it first. If you use a function from a js file that has not been loaded, the function does not take effect.

The js files are located in the pluggable folder under the main SpreadJS scripts folder.

Using Basic SpreadJS Functions

The following code sample shows how to use basic SpreadJS functions.

<!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 pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/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>

Using Basic Calc Functions

The following code sample shows how to use basic calc functions in the Spread worksheet.

<!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 pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine basic function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <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>

Using Calc and Advanced Functions

The following code sample shows how to use calc and advanced functions.

<!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 pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine advanced function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <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>

Using Binding Functions

The following code sample shows how to use binding functions.

<!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 pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
    <!--SpreadJS pluggable data binding library-->
    <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>

Using Formula Text Box

The following code sample shows how to use the formula text box.

<!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 pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
    <!--SpreadJS pluggable formula text box function library-->
    <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(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>

Using Comment Functions

The following code sample shows how to use the comment functions.

<!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 pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
    <!--SpreadJS pluggable comment library-->
    <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>

Using FloatObject Functions

The following code sample shows how to use the FloatObject functions.

<!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 pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
   <!--SpreadJS pluggable floating objects function library-->
    <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>