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.

Library Features
gcspread.sheets.core.x.xxxxx.x.js Widgets definition, Spread, Sheet, Drag Move, Selection, InputAction, BaseCellType
gcspread.sheets.binding.x.xxxxx.x.js Data binding functions
gcspread.sheets.calc.x.xxxxx.x.js Calc core and basic functions
gcspread.sheets.calc.functions.x.xxxxx.x.js All advanced functions
gcspread.sheets.celltypes.x.xxxxx.x.js CellType and CustomCellType functions
gcspread.sheets.comment.x.xxxxx.x.js Comment functions
gcspread.sheets.conditionalformat.x.xxxxx.x.js Conditional Format functions
gcspread.sheets.datavalidation.x.xxxxx.x.js Data Validation functions
gcspread.sheets.fill.x.xxxxx.x.js Drag and fill functions
gcspread.sheets.filter.x.xxxxx.x.js Filter functions
gcspread.sheets.floatingobject.x.xxxxx.x.js Picture and FloatingObject functions
gcspread.sheets.formatter.x.xxxxx.x.js Formatter functions
gcspread.sheets.formulatextbox.x.xxxxx.x.js FormulaTextBox functions
gcspread.sheets.group.x.xxxxx.x.js Range group functions
gcspread.sheets.print.x.xxxxx.x.js Printing functions
gcspread.sheets.search.x.xxxxx.x.js Search functions
gcspread.sheets.sparkline.x.xxxxx.x.js Sparkline functions
gcspread.sheets.sparklineEx.x.xxxxx.x.js Sparkline extension functions
gcspread.sheets.table.x.xxxxx.x.js Range table functions
gcspread.sheets.touch.x.xxxxx.x.js Touch functions
gcspread.slicer.x.xxxxx.x.js Slicer component and Slicer functions

The core js must always be loaded. The calc js must be loaded first in order to use functions. Many features use the calc 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/gcspread.sheets.9.40.20161.0.css" rel="stylesheet" />
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.core.9.40.20161.0.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //The SpreadJS definition and most UI behavior is in SpreadJS Core library. 
           var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"),{sheetCount:3});
            var activeSheet = spread.getActiveSheet();
        }
    </script>
</head>
<body>
    <div id="ss" class="spread" style="width: 80%; height: 500px"></div>
</body>
</html>

Using Code

This example uses basic calc functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>   
 <link href="./css/gcspread.sheets.9.40.20161.0.css" rel="stylesheet" type="text/css" />
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.core.9.40.20161.0.min.js"></script>
    <!--SpreadJS pluggable calc function library-->
    <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.calc.9.40.20161.0.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //The calc core and basic Function function is in SpreadJS calc library.       
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"),{sheetCount:3});
            var activeSheet = spread.getActiveSheet();
            activeSheet.setValue(0, 0, 1);
            activeSheet.setValue(0, 1, 5);
            activeSheet.setFormula(0, 2, "SUM(A1:B1)");
        }
    </script>
</head>
<body>
    <div id="ss" class="spread" style="width: 80%; height: 500px"></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 href="./css/gcspread.sheets.9.40.20161.0.css" rel="stylesheet" type="text/css" />
     <!--SpreadJS pluggable core function library-->
     <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.core.9.40.20161.0.min.js"></script>
     <!--SpreadJS pluggable calc function library-->
     <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.calc.9.40.20161.0.min.js"></script>
     <!--SpreadJS pluggable functions function library-->
     <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.calc.functions.9.40.20161.0.min.js"></script>
     <script type="text/javascript">
         window.onload = function () {
             //Advanced functions are defined in SpreadJS calc.functions library.
             //Because all functions are based on Calc, the calc library should be loaded first.
             var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"),{sheetCount:3});            
             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" class="spread" style="width: 80%; height: 500px"></div>
</body>
</html>

Using Code

This example uses binding functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>   
<link href="./css/gcspread.sheets.9.40.20161.0.css" rel="stylesheet" type="text/css" />
     <!--SpreadJS pluggable core function library-->
     <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.core.9.40.20161.0.min.js"></script>
     <!--SpreadJS pluggable data function library-->
     <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.binding.9.40.20161.0.min.js"></script>
     <script type="text/javascript">
         window.onload = function () {
             //The databinding related functions are in the SpreadJS binding library.
             var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"),{sheetCount:3});
             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" class="spread" style="width: 80%; height: 500px"></div>
</body>
</html>

Using Code

This example uses the comment functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
<link href="./css/gcspread.sheets.9.40.20161.0.css" rel="stylesheet" type="text/css" />
     <!--SpreadJS pluggable core function library-->
     <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.core.9.40.20161.0.min.js"></script>
     <!--SpreadJS pluggable comment function library-->
     <script type="text/javascript" src="./scripts/pluggable/gcspread.sheets.comment.9.40.20161.0.min.js"></script>
     <script type="text/javascript">
         window.onload = function () {
             //The comment function is in SpreadJS comment library.
             var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"),{sheetCount:3});
             var activeSheet = spread.getActiveSheet();
             var comment = new GcSpread.Sheets.Comment();
             comment.text("new comment!");
             comment.backColor("yellow");
             comment.foreColor("green");
             comment.displayMode(GcSpread.Sheets.DisplayMode.AlwaysShown);
             activeSheet.setComment(5, 5, comment);
         }
    </script>
</head>
<body>
    <div id="ss" class="spread" style="width: 80%; height: 500px"></div>
</body>
</html>

Using Code

This example uses the FloatObject functions.

JavaScript
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link href="css/gcspread.sheets.9.40.20161.0.css" rel="stylesheet" type="text/css" />        
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="pluggable/gcspread.sheets.core.9.40.20161.0.min.js"></script>
    <!--SpreadJS pluggable floatingobject/picture function library-->
    <script type="text/javascript" src="pluggable/gcspread.sheets.floatingobject.9.40.20161.0.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            //The customfloatingobject/picture function is in SpreadJS floatingobject library.
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"),{sheetCount:3});
            var activeSheet = spread.getActiveSheet();
            var customFloatingObject = new GcSpread.Sheets.CustomFloatingObject("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.addFloatingObject(customFloatingObject);
        }
    </script>
</head>
<body>
    <div id="ss" class="spread" style="width: 80%; height: 500px"></div>
</body>
</html>

 

 

Copyright © GrapeCity, inc. All rights reserved.

Send comments on this topic.