SpreadJS 13
SpreadJS Documentation / Developer's Guide / Get Started / SpreadJS Libraries
In This Topic
    SpreadJS Libraries
    In This Topic

    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
    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.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
    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.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.13.0.0.css" rel="stylesheet"/>
        <!--SpreadJS pluggable common function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
        <!--SpreadJS pluggable core function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.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.13.0.0.css" rel="stylesheet"/>
        <!--SpreadJS pluggable common function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
        <!--SpreadJS pluggable calcengine function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.13.0.0.min.js"></script>
        <!--SpreadJS pluggable calcengine basic function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.13.0.0.min.js"></script>
        <!--SpreadJS pluggable core function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.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.13.0.0.css" rel="stylesheet"/>
        <!--SpreadJS pluggable common function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
        <!--SpreadJS pluggable calcengine function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.13.0.0.min.js"></script>
        <!--SpreadJS pluggable calcengine advanced function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.13.0.0.min.js"></script>
        <!--SpreadJS pluggable core function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.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.13.0.0.css" rel="stylesheet"/>
        <!--SpreadJS pluggable common function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
        <!--SpreadJS pluggable core function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
        <!--SpreadJS pluggable data binding library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.bindings.13.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.13.0.0.css" rel="stylesheet"/>
        <!--SpreadJS pluggable common function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
        <!--SpreadJS pluggable calcengine function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.13.0.0.min.js"></script>
        <!--SpreadJS pluggable core function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
        <!--SpreadJS pluggable formula text box function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.formulatextbox.13.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.13.0.0.css" rel="stylesheet"/>
        <!--SpreadJS pluggable common function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
        <!--SpreadJS pluggable core function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
        <!--SpreadJS pluggable comment library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.comments.13.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.13.0.0.css" rel="stylesheet"/>
        <!--SpreadJS pluggable common function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.13.0.0.min.js"></script>
        <!--SpreadJS pluggable core function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.13.0.0.min.js"></script>
       <!--SpreadJS pluggable floating objects function library-->
        <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.floatingobjects.13.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>