Spread.Sheets单独模块引用

如果只需要 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
Print	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>

Page tree

Spread.Sheets单独模块引用

你可以参照以下代码