如果只需要 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 目录下。
你可以参照以下代码
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.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> | |
Using Code
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.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> | |
Using Code
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.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> | |
Using Code
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.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> | |
Using Code
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.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> | |
Using Code
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.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> | |
Using Code
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.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> | |