Page History

...

在所有的依赖项中，core.js 是必须得引用的。
由于许多功能都依赖于 calcengine.js，我们建议您把这个文件写在所有依赖的最前面。
上表的所有JavaScript文件均位于 pluggable 目录下。

你可以参照以下代码

这是使用 Spread这是使用Spread.Sheets 的基础功能的例子Sheets基础功能的例子

...

Code Block

...

Copy Code

language	xml
title	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>

这是使用使用 calc 中的基础功能的例子

...

Copy Code

这是使用基本计算功能的例子

Code Block

language	xml
title	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>

这是使用 calc 以及一些高级功能的例子这是使用计算及其高级功能的例子

...

Code Block

...

Copy Code

language	xml
title	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>

...

这是使用数据绑定的例子

...

Code Block

...

Copy Code

language	xml
title	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>

这是使用 Formula Text Box 功能的例子

...

Copy Code

这是使用公式相关功能的例子

Code Block

language	xml
title	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>

...

这是使用批注相关功能的例子

...

Code Block

...

Copy Code

language	xml
title	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>

Using Code

这是使用 FloatObject 功能的例子这是使用浮动对象相关功能的例子.

...

Code Block

...

Copy Code

language	xml
title	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

Versions Compared

Old Version 3

New Version 4

Key

你可以参照以下代码

Using Code