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.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js |
Basic Functions | gc.spread.common.*.*.*.min.js gc.spread.calcengine.*.*.*.min.js gc.spread.sheets.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.sheets.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.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.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.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 |
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.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.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.sheets.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.calcengine.*.*.*.min.js 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 |
TableSheet | gc.spread.common.*.*.*.js gc.spread.calcengine.*.*.*.js gc.data.*.*.*.js gc.spread.sheets.core.*.*.*.js gc.spread.sheets.calcengine.*.*.*.js gc.spread.sheets.bindings.*.*.*.js gc.spread.sheets.tables.*.*.*.js gc.spread.sheets.automerge.*.*.*.js gc.spread.sheets.cellstate.*.*.*.js gc.spread.sheets.statusbar.*.*.*.js gc.spread.sheets.conditionalformatting.*.*.*.js gc.spread.sheets.filter.*.*.*.js gc.spread.sheets.tablesheet.*.*.*.js |
GanttSheet | gc.spread.common.*.*.*.js gc.spread.calcengine.*.*.*.js gc.data.*.*.*.js gc.spread.sheets.core.*.*.*.js gc.spread.sheets.calcengine.*.*.*.js gc.spread.sheets.bindings.*.*.*.js gc.spread.sheets.tables.*.*.*.js gc.spread.sheets.automerge.*.*.*.js gc.spread.sheets.cellstate.*.*.*.js gc.spread.sheets.statusbar.*.*.*.js gc.spread.sheets.conditionalformatting.*.*.*.js gc.spread.sheets.filter.*.*.*.js gc.spread.sheets.tablesheet.*.*.*.js gc.spread.sheets.ganttsheet.*.*.*.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) |
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.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.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.calcengine.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.floatingobjects.*.*.*.min.js gc.spread.sheets.shapes.*.*.*.min.js |
Hyperlink | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.hyperlink.*.*.*.js |
NameBox | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.namebo*.*.*.x.js |
Statusbar | gc.spread.common.*.*.*.min.js gc.spread.sheets.core.*.*.*.min.js gc.spread.sheets.statusbar.*.*.*.js |
The core js must always be loaded. The calcengine js must be loaded first 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 Basic SpreadJS Functions
The following code sample shows how to use basic SpreadJS functions.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.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 Basic Calc Functions
The following code sample shows how to use basic calc functions in the Spread worksheet.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS pluggable calcengine function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
<!--SpreadJS pluggable calcengine basic function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.x.x.x.min.js"></script>
<!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.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 Calc and Advanced Functions
The following code sample shows how to use calc and advanced functions.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS pluggable calcengine function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
<!--SpreadJS pluggable calcengine advanced function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.x.x.x.min.js"></script>
<!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.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 Binding Functions
The following code sample shows how to use binding functions.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS pluggable data binding library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.bindings.x.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 Formula Text Box
The following code sample shows how to use the formula text box.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS pluggable calcengine function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
<!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS pluggable formula text box function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.formulatextbox.x.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 Comment Functions
The following code sample shows how to use the comment functions.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS pluggable comment library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.comments.x.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 FloatObject Functions
The following code sample shows how to use the FloatObject functions.
<!DOCTYPE html>
<html>
<head>
<title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
<!--SpreadJS pluggable common function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
<!--SpreadJS pluggable core function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
<!--SpreadJS pluggable floating objects function library-->
<script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.floatingobjects.x.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>