Spread.Sheets Documentation
Using Spread.Sheets Libraries
Spread.Sheets Documentation > Developer's Guide > Getting Started > Using Spread.Sheets Libraries

You can load Spread.Sheets 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
Slicer  
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

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 Spread.Sheets scripts folder.

Using Code

This example uses basic Spread.Sheets functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>Spread.Sheets Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.10.x.x.css" rel="stylesheet"/>
    <!--Spread.Sheets pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.10.x.x.min.js"></script>
    <!--Spread.Sheets pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.10.x.x.min.js"></script>
    <script>
        // The Spread definition and most UI behavior is in the Spread.Sheets 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>Spread.Sheets Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.10.x.x.css" rel="stylesheet"/>
    <!--Spread.Sheets pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.10.x.x.min.js"></script>
    <!--Spread.Sheets pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.10.x.x.min.js"></script>
    <!--Spread.Sheets pluggable calcengine basic function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.10.x.x.min.js"></script>
    <!--Spread.Sheets pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.10.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 Code

This example uses calc and advanced functions.

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

This example uses binding functions.

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

This example uses the formula text box.

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

This example uses the comment functions.

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

This example uses the FloatObject functions.

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

 

 

Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.