SpreadJS Documentation
Using SpreadJS Libraries
SpreadJS Documentation > Developer's Guide > Getting Started > Using 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.core.*.*.*.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
Advanced Functions gc.spread.common.*.*.*.min.js
gc.spread.calcengine.*.*.*.min.js
gc.spread.calcengine.advancedfunctions.*.*.*.min.js
gc.spread.sheets.core.*.*.*.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.fill.*.*.*.min.js
Filter gc.spread.common.*.*.*.min.js
gc.spread.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.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
Outline 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 Type gc.spread.common.*.*.*.min.js
gc.spread.sheets.core.*.*.*.min.js
gc.spread.sheets.celltypes.*.*.*.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.conditionalformatting.*.*.*.min.js
Data Validation gc.spread.common.*.*.*.min.js
gc.spread.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.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.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
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.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.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.core.*.*.*.min.js
gc.spread.sheets.floatingobjects.*.*.*.min.js
gc.spread.sheets.shapes.*.*.*.min.js

The core js must always be loaded. The calcengine js must be loaded first in order 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 Code

This example uses basic SpreadJS functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.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 Code

This example uses basic calc functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.12.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine basic function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.12.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.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 Code

This example uses calc and advanced functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.12.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine advanced function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.12.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.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 Code

This example uses binding functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"></script>
    <!--SpreadJS pluggable data binding library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.bindings.12.0.0.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 Code

This example uses the formula text box.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.12.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"></script>
    <!--SpreadJS pluggable formula text box function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.formulatextbox.12.0.0.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 Code

This example uses the comment functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"></script>
    <!--SpreadJS pluggable comment library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.comments.12.0.0.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 Code

This example uses the FloatObject functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"></script>
   <!--SpreadJS pluggable floating objects function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.floatingobjects.12.0.0.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>

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page