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