SpreadJS 产品帮助手册
Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

如果只需要 Spread.Sheets 中的一部分功能，您可以只引用 Spread.Sheets 中的一部分。

下表列举了所有 Spread.Sheets 的模块，以及对应模块的依赖项。

模块依赖项
Coregc.spread.common.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
Calc Enginegc.spread.common.*.**.*****.*.min.js
gc.spread.calcengine.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
Basic Functionsgc.spread.common.*.**.*****.*.min.js
gc.spread.calcengine.*.**.*****.*.min.js
gc.spread.calcengine.basicfunctions.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
Advanced Functionsgc.spread.common.*.**.*****.*.min.js
gc.spread.calcengine.*.**.*****.*.min.js
gc.spread.calcengine.advancedfunctions.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
Data Bindinggc.spread.common.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.bindings.*.**.*****.*.min.js
Drag Fillgc.spread.common.*.**.*****.*.min.js
gc.spread.calcengine.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.fill.*.**.*****.*.min.js
Filtergc.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 Textboxgc.spread.common.*.**.*****.*.min.js
gc.spread.calcengine.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.formulatextbox.*.**.*****.*.min.js
Floating Objectgc.spread.common.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.floatingobjects.*.**.*****.*.min.js
Outlinegc.spread.common.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.outlines.*.**.*****.*.min.js
Touchgc.spread.common.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.touch.*.**.*****.*.min.js
Printgc.spread.common.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.print.*.**.*****.*.min.js
Cell Typegc.spread.common.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.celltypes.*.**.*****.*.min.js
Commentgc.spread.common.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.comments.*.**.*****.*.min.js
Conditional Formattinggc.spread.common.*.**.*****.*.min.js
gc.spread.calcengine.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.conditionalformatting.*.**.*****.*.min.js
Data Validationgc.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
Searchgc.spread.common.*.**.*****.*.min.js
gc.spread.sheets.core.*.**.*****.*.min.js
gc.spread.sheets.search.*.**.*****.*.min.js
Sparklinegc.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
Tablegc.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 Componentgc.spread.common.*.**.*****.*.min.js
Slicergc.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

提示：

  1. 在所有的依赖项中，core.js 是必须得引用的。
  2. 由于许多功能都依赖于 calcengine.js，我们建议您把这个文件写在所有依赖的最前面。
  3. 上表的所有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> 
  • No labels