如果只需要 Spread.Sheets 中的一部分功能,您可以只引用 Spread.Sheets 中的一部分。
下表列举了所有 Spread.Sheets 的模块,以及对应模块的依赖项。
模块 | 依赖项 |
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 |
提示:
- 在所有的依赖项中,core.js 是必须得引用的。
- 由于许多功能都依赖于 calcengine.js,我们建议您把这个文件写在所有依赖的最前面。
- 上表的所有JavaScript文件均位于 pluggable 目录下。
你可以参照以下代码
这是使用Spread.Sheets基础功能的例子
HTML
<!DOCTYPE html> <html> <head> <title>Spread.Sheets Pluggable Sample</title> <link type="text/css" href="./css/gc.spread.sheets.10.1.0.css" rel="stylesheet"/> <!--Spread.Sheets pluggable common function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.10.1.0.min.js"></script> <!--Spread.Sheets pluggable core function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.10.1.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>
这是使用基本计算功能的例子
HTML
<!DOCTYPE html> <html> <head> <title>Spread.Sheets Pluggable Sample</title> <link type="text/css" href="./css/gc.spread.sheets.10.1.0.css" rel="stylesheet"/> <!--Spread.Sheets pluggable common function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.10.1.0.min.js"></script> <!--Spread.Sheets pluggable calcengine function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.10.1.0.min.js"></script> <!--Spread.Sheets pluggable calcengine basic function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.10.1.0.min.js"></script> <!--Spread.Sheets pluggable core function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.10.1.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>
这是使用计算及其高级功能的例子
HTML
<!DOCTYPE html> <html> <head> <title>Spread.Sheets Pluggable Sample</title> <link type="text/css" href="./css/gc.spread.sheets.10.1.0.css" rel="stylesheet"/> <!--Spread.Sheets pluggable common function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.10.1.0.min.js"></script> <!--Spread.Sheets pluggable calcengine function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.10.1.0.min.js"></script> <!--Spread.Sheets pluggable calcengine advanced function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.10.1.0.min.js"></script> <!--Spread.Sheets pluggable core function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.10.1.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>
这是使用数据绑定的例子
HTML
<!DOCTYPE html> <html> <head> <title>Spread.Sheets Pluggable Sample</title> <link type="text/css" href="./css/gc.spread.sheets.10.1.0.css" rel="stylesheet"/> <!--Spread.Sheets pluggable common function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.10.1.0.min.js"></script> <!--Spread.Sheets pluggable core function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.10.1.0.min.js"></script> <!--Spread.Sheets pluggable data binding library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.bindings.10.1.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>
这是使用公式相关功能的例子
HTML
<!DOCTYPE html> <html> <head> <title>Spread.Sheets Pluggable Sample</title> <link type="text/css" href="./css/gc.spread.sheets.10.1.0.css" rel="stylesheet"/> <!--Spread.Sheets pluggable common function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.10.1.0.min.js"></script> <!--Spread.Sheets pluggable calcengine function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.10.1.0.min.js"></script> <!--Spread.Sheets pluggable core function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.10.1.0.min.js"></script> <!--Spread.Sheets pluggable formula text box function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.formulatextbox.10.1.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>
这是使用批注相关功能的例子
HTML
<!DOCTYPE html> <html> <head> <title>Spread.Sheets Pluggable Sample</title> <link type="text/css" href="./css/gc.spread.sheets.10.1.0.css" rel="stylesheet"/> <!--Spread.Sheets pluggable common function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.10.1.0.min.js"></script> <!--Spread.Sheets pluggable core function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.10.1.0.min.js"></script> <!--Spread.Sheets pluggable comment library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.comments.10.1.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>
这是使用浮动对象相关功能的例子.
HTML
<!DOCTYPE html> <html> <head> <title>Spread.Sheets Pluggable Sample</title> <link type="text/css" href="./css/gc.spread.sheets.10.1.0.css" rel="stylesheet"/> <!--Spread.Sheets pluggable common function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.10.1.0.min.js"></script> <!--Spread.Sheets pluggable core function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.10.1.0.min.js"></script> <!--Spread.Sheets pluggable floating objects function library--> <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.floatingobjects.10.1.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>