SpreadJS 库
您可以加载 SpreadJS 子库以使用某些功能，而无需加载所有库。
特性 | 要求的库 |
|---|---|
核心 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js |
计算引擎 | gc.spread.common.*.min.js gc.spread.calcengine.*.min.js gc.spread.sheets.core.*.min.js |
基本函数 | gc.spread.common.*.min.js gc.spread.calcengine.*.min.js gc.spread.calcengine.basicfunctions.*.min.js gc.spread.sheets.core.*.min.js |
进阶函数 | gc.spread.common.*.min.js gc.spread.calcengine.*.min.js gc.spread.calcengine.advancedfunctions.*.min.js gc.spread.sheets.core.*.min.js |
自动合并 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.automerge.*.min.js |
数据绑定 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.bindings.*.min.js |
拖拽填充 | gc.spread.common.*.min.js gc.spread.calcengine.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.fill.*.min.js |
筛选 | 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.common.*.min.js gc.spread.calcengine.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.formulatextbox.*.min.js |
浮动对象 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.floatingobjects.*.min.js |
大纲 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.outlines.*.min.js |
触控 | 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 |
单元格类型 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.celltypes.*.min.js |
单元格状态 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.cellstate.*.min.js |
批注 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.comments.*.min.js |
条件格式 | gc.spread.common.*.min.js gc.spread.calcengine.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.conditionalformatting.*.min.js |
数据验证 | 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 |
搜索 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.search.*.min.js |
迷你图 | 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 |
表格 | 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 |
图表 | 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 |
拖动合并 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.dragmerge.*.min.js |
大纲列 | gc.spread.common.*.min.js gc.spread.sheets.core.*.min.js gc.spread.sheets.outlinecolumn.*.min.js |
上下文菜单 | 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 | |
切片器组件 | gc.spread.common.*.min.js |
切片器 | 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 |
条形码 | 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 |
形状 | 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 |
核心 JS 必须始终加载。 必须先加载 calcengine js 才能使用函数。 许多功能都使用 calcengine js，因此您可能希望先加载它。 如果使用尚未加载的js文件中的函数，则该函数不会生效。
JS 文件位于 SpreadJS 脚本文件夹下。
示例代码
本示例使用基本的 SpreadJS 功能。
<!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>示例代码
本示例使用基本的计算功能。
<!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>示例代码
本例使用演示高级计算功能。
<!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>示例代码
本示例使用绑定功能。
<!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>示例代码
本示例使用公式文本框。
<!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>示例代码
本示例使用批注功能。
<!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>示例代码
本示例使用 FloatObject 功能。
<!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>