...
- 在所有的依赖项中，core.js 是必须得引用的。
- 由于许多功能都依赖于 calcengine.js，我们建议您把这个文件写在所有依赖的最前面。
- 上表的所有JavaScript文件均位于 pluggable 目录下。
你可以参照以下代码
This example uses basic Spread这是使用 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.
这是使用 使用 calc 中的基础功能 的例子
| 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.这是使用 calc 以及一些高级功能的例子
| 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.
这是使用 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.
这是使用 注释（Comment）功能的例子
| 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这是使用 FloatObject 功能的例子.
| 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> | |
...